Question

我试图使用formbuilder来减少我的表单组件上的相当多的代码，但无论我做什么，我都无法让它工作，我不断得到＆＃39;不能阅读财产＆＃39;无效＆＃39;未定义＆＃39;，代码在下面，我错过了什么？

component.html

<form [formGroup]="myForm" class="mt-3" (ngSubmit)="onSubmit()" novalidate>
<fieldset formGroupName="name">

    <div class="form-group" [ngClass]="{'has-danger': firstName.invalid && (firstName.dirty || firstName.touched), 'has-success': firstName.valid && (firstName.dirty || firstName.touched)}">
        <label>First Name</label>
        <input type="text" class="form-control" formControlName="firstName">
    </div>

    <div class="form-group" [ngClass]="{'has-danger': lastName.invalid && (lastName.dirty || lastName.touched), 'has-success': lastName.valid && (lastName.dirty || lastName.touched)}">
        <label>Last Name</label>
        <input type="text" class="form-control" formControlName="lastName">
    </div>

</fieldset>

<div class="form-group" [ngClass]="{'has-danger': email.invalid && (email.dirty || email.touched), 'has-success': email.valid && (email.dirty || email.touched)}">
    <label>Email</label>
    <input type="email" class="form-control" formControlName="email">
</div>


<div class="form-group" [ngClass]="{'has-danger': password.invalid && (password.dirty || password.touched), 'has-success': password.valid && (password.dirty || password.touched)}">
    <label>Password</label>
    <input type="password" class="form-control" formControlName="password">
</div>


<div class="form-group" [ngClass]="{'has-danger': language.invalid && (language.dirty || language.touched), 'has-success': language.valid && (language.dirty || language.touched)}">
    <label>Language</label>
    <select class="form-control" formControlName="language">
        <option value="">Please select a language</option>
        <option *ngFor="let lang of langs" [value]="lang">{{lang}}</option>
    </select>
</div>

<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button>

component.ts

import { Component, OnInit, AfterViewInit, Pipe } from '@angular/core';
import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms';

export class ModelDrivenFormFormModelValidationComponent implements OnInit {
  langs: string[] = ['English', 'French', 'German'];

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
      this.createForm();
  }

  createForm() {
      this.myForm = this.fb.group({
          name: this.fb.group({
              firstName: ['', [Validators.required]],
              lastName: ['', [Validators.required]]
          }),
          email: ['', [Validators.required, Validators.pattern('[^ @]*@[^@]*')]],
          password: ['', [Validators.required, Validators.minLength(8)]],
          language: ''
      });
  }

  ngOnInit() {}
}

Answer 1

组件模板在声明之前尝试访问变量。使用安全导航操作符?.和所有表单字段来避免这种情况。示例如下：

<div class="form-group" [ngClass]="{'has-danger': password?.invalid && (password?.dirty || password?.touched), 'has-success': password?.valid && (password?.dirty || password?.touched)}">
    <label>Password</label>
    <input type="password" class="form-control" formControlName="password">
</div>

Answer 2

在反应式表单中，您不能仅使用email来引用表单控件（与使用模板引用变量的模板驱动表单相反）。

您需要在模板中引用实际的表单控件，例如，您的email验证可能如下所示：

[ngClass]="{'has-danger': myForm.controls.email.invalid && ..... }

（这里也可能需要安全导航操作员，不确定，如果它抛出错误，你可以追加它）

这是一个很长的路径，所以你可以在构建表单之后将它实际分配给一个变量，例如变量email，然后就可以使用你现在拥有的代码了。

email: FormControl;

createForm() {
  this.myForm = this.fb.group({
      ....
  });

  this.email = this.myForm.controls.email;
}

angular formbuilder无法找到formgroup

2 个答案: