javascript TypeError:this.form._updateTreeValidity不是函数

9wbgstp7  于 2023-05-16  发布在  Java
关注(0)|答案(8)|浏览(132)

我目前正在使用Angular Forms 2.0.0版本,并试图使联系我们模态与联系表单内。
在ContactComponent加载之后,我立即得到:
异常:this.form._updateTreeValidity不是函数

1.我已经看到一些其他的堆栈帖子,建议使用FormGroup而不是FormBuilder来初始化组件构造器中的表单对象,现在是新API的标准,所以我已经更新了。
1.我导入ReactiveFormsModule和FormsModule沿着所有与表单相关的组件,错误似乎与模块无关。
1.我的TypeScript不会在编译时抛出错误,Visual Studio Intellisense似乎能够很好地找到所有FormGroup函数,那么为什么在运行时会发生这种情况呢?...
我的代码:
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 {
}
xoefb8l8

xoefb8l81#

绑定模板变量#contactForm似乎会导致名称冲突,并在模板处理器试图将附加的模板变量转换为后端的NgForm时使模板处理器崩溃。我所看到的模型驱动的表单都没有模板变量绑定在表单上,而在模板驱动的表单中使用了#tv="ngForm"。似乎在混合两种形式的方法时遗漏了导致错误的方法。
只需将其移除即可解决问题。

vlf7wbxs

vlf7wbxs2#

当你错误地将formGroup="..."而不是[formGroup]="..."添加到模板中时,你也会得到这个错误消息。

cnh2zyt3

cnh2zyt33#

已经有一段时间了,但对我来说,问题是将formGroup传递给模板,而不是直接引用它。
例如,这是不工作

<ng-template #selectField
             let-field
             let-group
             let-frmName="frmName">
    <ng-container [formGroup]="group">
        <mat-form-field fxFlex="32"
                        floatLabel="always">
            <mat-label>{{field.label}}</mat-label>
            <mat-select [formControlName]="frmName"
                        [required]="field.required">
                <mat-option *ngFor="let option of field.options"
                            [value]="option.value">
                    {{option.description}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </ng-container>
</ng-template>

如果我直接使用我的formGroup示例,它工作得很好。
希望这能帮上忙。

uqzxnwby

uqzxnwby4#

当您在非表单控件的自定义组件上使用输入名称formControlformGroup时,可能会发生这种情况。
更改自定义组件以接受不同的输入名称:

更改此

@Input()
formGroup: string
// ^ Causes issues

To this

@Input()
group: string
wixjitnu

wixjitnu5#

我有一个动态的形式。我得到上述错误,因为我没有在ngOnInit()中初始化它

解决方案:

checkInForm: FormGroup;

ngOnInit(){
    this.checkInForm = this.formBuilder.group({});
}
tag5nh1u

tag5nh1u6#

有时候,当您使用[formGroup]传递formGroup名称的字符串时,会导致此错误。使用formGroupName代替。

1tu0hz3e

1tu0hz3e7#

在我的例子中,当我错误地使用模板上的HTML属性时,会抛出错误:

<form formGroup="..."></form>

我们应该使用Angular属性:

<form [formGroup]="..."></form>
zxlwwiss

zxlwwiss8#

我忘记将表单传递给可重用的输入<app-input [form]="myForm"></app-input>
app-input.component.html

<form [formGroup]="form">
  <input [type]="type" [placeholder]="placeholder [formControlName]="formControlName" />
</form>

app-input.component.ts

@Input() type: string = '';
  @Input() placeholder: string = '';
  @Input() formControlName: string = ''
  @Input() form: FormGroup = {} as FormGroup;

相关问题