类型错误:this.form._updateTreeValidity 不是函数 [英] TypeError: this.form._updateTreeValidity is not a function
本文介绍了类型错误:this.form._updateTreeValidity 不是函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在使用 Angular Forms 2.0.0 版，并尝试使用内部的联系表单与我们联系.
在 ContactComponent 加载后，我立即得到:
<块引用>例外:this.form._updateTreeValidity 不是函数
我已经看到其他一些堆栈帖子表明使用 FormGroup 而不是 FormBuilder 来初始化组件构造函数中的表单对象现在是新 API 的标准，所以我已经更新了.
我导入了 ReactiveFormsModule 和 FormsModule 以及所有与表单相关的组件，但错误似乎与模块无关.
我的 TypeScript 没有在编译时抛出错误，而且 Visual Studio Intellisense 似乎能够很好地找到所有 FormGroup 函数，那么为什么会在运行时发生这种情况?...
我的代码:
contact.component.ts:
import { Component, Input, ViewChild } from '@angular/core';从'../../../services/api.service'导入{ApiService}；从 'ng2-bs3-modal/ng2-bs3-modal' 导入 { ModalComponent };从'@angular/router' 导入 { Router, ActivatedRoute, Params };import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';导入 'rxjs/Rx';声明 var jQuery: 任何;@成分({选择器:我的联系人"，templateUrl: 'app/modules/footer/contact/contact.html'})导出类 ContactComponent {私人联系表格:FormGroup；私人无效电子邮件:布尔值；私人无效主题:布尔值；私有无效消息:布尔值；构造函数(私有 apiService:ApiService，私有路由器:路由器，私有路由:ActivatedRoute){this.contactForm = new FormGroup({emailControl: new FormControl('', <any>Validators.required),subjectControl: new FormControl('', <any>Validators.required),messageControl: new FormControl('', <any>Validators.required)});}提交() {如果(this.contactForm.valid){this.apiService.sendMessage(this.contactForm.controls['emailControl'].value, this.contactForm.controls['subjectControl'].value, this.contactForm.controls['messageControl'].value);}如果 (!this.contactForm.controls['emailControl'].valid) {this.invalidEmail = true;}如果 (!this.contactForm.controls['subjectControl'].valid) {this.invalidSubject = true;}如果 (!this.contactForm.controls['messageControl'].valid) {this.invalidMessage = true;}}ngOnInit() {this.invalidEmail = false;this.invalidSubject = false;this.invalidMessage = false;}}contact.html:
<h4 class="modal-title text-uppercase">给我们发送消息</h4></modal-header><form novalidate #contactForm [formGroup]="contactForm" (ngSubmit)="submit()"><div class="modal-body"><div class="form-group"><label for="email" class="control-label">Email</label><input name="email" formControlName="emailControl" placeholder="" type="text" class="c-square form-control c-margin-b-20" id="email"><div class="c-font-red-1" *ngIf="invalidEmail" style="position: absolute;">*Required</div><label for="subject" class="control-label">Subject</label><input name="subject" formControlName="subjectControl" placeholder="" type="text" class="c-square form-control c-margin-b-20" id="subject"><div class="c-font-red-1" *ngIf="invalidSubject" style="position: absolute;">*Required</div><textarea formControlName="messageControl" style="resize: vertical;"class="c-square form-control c-margin-b-20" id="content" (keyup.enter)="submit()"></textarea><div class="c-font-red-1" *ngIf="invalidMessage" style="position: absolute;">*Required</div> <modal-footer class="c-no-padding"><button type="button" class="btn c-btn-square c-btn-bold c-btn-uppercase pull-right">取消</button><button type="submit" class="btn c-theme-btn c-btn-square c-btn-bold c-btn-uppercase pull-right" style="margin-right: 10px;">发送</按钮></modal-footer></表单>
app.module.ts:
import { NgModule, enableProdMode } from '@angular/core';从'@angular/platform-browser' 导入 { BrowserModule };从 './app.component' 导入 { AppComponent };从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从 'ng2-bs3-modal/ng2-bs3-modal' 导入 { Ng2Bs3ModalModule };从 './modules/queues/queues.module' 导入 { QueuesModule };import { OrderModule } from './modules/order/order.module';从 './modules/account/account.module' 导入 { AccountModule };从 './modules/admin/admin.module' 导入 { AdminModule };从'./app.routing'导入{路由}；从'@progress/kendo-angular-grid'导入{GridModule}；从 './modules/splash/splash.component' 导入 { SplashComponent };从 './modules/footer/contact/contact.component' 导入 { ContactComponent };从 './shared/shared.module' 导入 { SharedModule };从 './shared/utilities/custom-validators' 导入 { EmailValidator }从'angular2-cookie/services/cookies.service'导入{CookieService}；从@angular/http"导入 { HttpModule, Response };从 './services/string.service' 导入 { StringService };从'./services/api.service'导入{ApiService}；从'./services/user.service'导入{用户服务}；从'./services/order.service'导入{订单服务}；从 './services/order-guard.service' 导入 { OrderGuard };从'./modules/footer/footer.component'导入{FooterComponent}；import { ErrorComponent } from './modules/error/error.component';从ng2-validation"导入 { CustomFormsModule };@NgModule({进口:[浏览器模块，表单模块，反应形式模块，Http模块，队列模块，订单模块，账户模块，管理模块，路由，网格模块，共享模块，Ng2Bs3ModalModule，自定义表单模块],声明: [应用组件，飞溅组件，页脚组件，错误组件，接触组件],供应商: [字符串服务，服务，用户服务，饼干服务，订单服务，秩序卫士],引导程序:[AppComponent]，出口:[]})导出类 AppModule {} 解决方案
绑定模板变量 #contactForm 似乎会导致名称冲突并炸毁模板处理器，因为它试图打开附加的模板变量转换为后端的 NgForm.在我看到使用模型驱动表单的任何地方，表单上都没有模板变量绑定，而在模板驱动表单中使用了 #tv="ngForm".两种形式方法的混合似乎存在失误导致错误.
只需将其删除即可解决问题.
I'm currently using Angular Forms version 2.0.0 and trying to make a contact us modal with a contact form inside.
Immediately after the ContactComponent loads, I get:
EXCEPTION: this.form._updateTreeValidity is not a function
I've already seen some other stack posts suggesting that using FormGroup instead of FormBuilder to init the form object in the component constructor is now standard with the new API so I've updated that.
I import ReactiveFormsModule and FormsModule along with all the form related components and the error doesn't seem to be module related.
My TypeScript isn't throwing errors in compile time and Visual Studio Intellisense seems to be able to find all FormGroup functions just fine so why is this happening at runtime?...
My code:
contact.component.ts:
import { Component, Input, ViewChild } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
import 'rxjs/Rx';
declare var jQuery: any;
@Component({
selector: 'my-contact',
templateUrl: 'app/modules/footer/contact/contact.html'
})
export class ContactComponent {
private contactForm: FormGroup;
private invalidEmail: boolean;
private invalidSubject: boolean;
private invalidMessage: boolean;
constructor(private apiService: ApiService, private router: Router, private route: ActivatedRoute) {
this.contactForm = new FormGroup({
emailControl: new FormControl('', <any>Validators.required),
subjectControl: new FormControl('', <any>Validators.required),
messageControl: new FormControl('', <any>Validators.required)
});
}
submit() {
if (this.contactForm.valid) {
this.apiService.sendMessage(this.contactForm.controls['emailControl'].value, this.contactForm.controls['subjectControl'].value, this.contactForm.controls['messageControl'].value);
}
if (!this.contactForm.controls['emailControl'].valid) {
this.invalidEmail = true;
}
if (!this.contactForm.controls['subjectControl'].valid) {
this.invalidSubject = true;
}
if (!this.contactForm.controls['messageControl'].valid) {
this.invalidMessage = true;
}
}
ngOnInit() {
this.invalidEmail = false;
this.invalidSubject = false;
this.invalidMessage = false;
}
}
contact.html:
<modal-header class="c-no-border" [show-close]="true">
<h4 class="modal-title text-uppercase">Send us a message</h4>
</modal-header>
<form novalidate #contactForm [formGroup]="contactForm" (ngSubmit)="submit()">
<div class="modal-body">
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input name="email" formControlName="emailControl" placeholder="" type="text" class="c-square form-control c-margin-b-20" id="email">
<div class="c-font-red-1" *ngIf="invalidEmail" style="position: absolute;">*Required</div>
<label for="subject" class="control-label">Subject</label>
<input name="subject" formControlName="subjectControl" placeholder="" type="text" class="c-square form-control c-margin-b-20" id="subject">
<div class="c-font-red-1" *ngIf="invalidSubject" style="position: absolute;">*Required</div>
<textarea formControlName="messageControl" style="resize: vertical;" class="c-square form-control c-margin-b-20" id="content" (keyup.enter)="submit()"></textarea>
<div class="c-font-red-1" *ngIf="invalidMessage" style="position: absolute;">*Required</div>
</div>
</div>
<modal-footer class="c-no-padding">
<button type="button" class="btn c-btn-square c-btn-bold c-btn-uppercase pull-right">Cancel</button>
<button type="submit" class="btn c-theme-btn c-btn-square c-btn-bold c-btn-uppercase pull-right" style="margin-right: 10px;">Send</button>
</modal-footer>
</form>
app.module.ts:
import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
import { QueuesModule } from './modules/queues/queues.module';
import { OrderModule } from './modules/order/order.module';
import { AccountModule } from './modules/account/account.module';
import { AdminModule } from './modules/admin/admin.module';
import { routing } from './app.routing';
import { GridModule } from '@progress/kendo-angular-grid';
import { SplashComponent } from './modules/splash/splash.component';
import { ContactComponent } from './modules/footer/contact/contact.component';
import { SharedModule } from './shared/shared.module';
import { EmailValidator } from './shared/utilities/custom-validators'
import { CookieService } from 'angular2-cookie/services/cookies.service';
import { HttpModule, Response } from '@angular/http';
import { StringService } from './services/string.service';
import { ApiService } from './services/api.service';
import { UserService } from './services/user.service';
import { OrderService } from './services/order.service';
import { OrderGuard } from './services/order-guard.service';
import { FooterComponent } from './modules/footer/footer.component';
import { ErrorComponent } from './modules/error/error.component';
import { CustomFormsModule } from "ng2-validation";
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
QueuesModule,
OrderModule,
AccountModule,
AdminModule,
routing,
GridModule,
SharedModule,
Ng2Bs3ModalModule,
CustomFormsModule
],
declarations: [
AppComponent,
SplashComponent,
FooterComponent,
ErrorComponent,
ContactComponent
],
providers: [
StringService,
ApiService,
UserService,
CookieService,
OrderService,
OrderGuard
],
bootstrap: [AppComponent],
exports: [
]
})
export class AppModule {
}
解决方案
Binding the template variable #contactForm appears to cause a name conflict and blow up the template processor as it tries to turn the attached template variable into an NgForm on the backend. Everywhere I have seen model driven forms used there is no template variable binding on the form, whereas there is a #tv="ngForm" utilized in template driven forms. It appears there was a miss on the mixing of the two forms approaches which resulted in the error.
Simply removing it will resolve the issue.
这篇关于类型错误:this.form._updateTreeValidity 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
