Angular 5 嵌套表单和验证和属性 'controls' 在类型 'AbstractControl' 上不存在

Question

我设置了一个嵌套的表单组。到目前为止一切正常。但是我不确定当存在嵌套表单元素时如何正确设置验证警报。

发生的一件事是在构建过程中出现错误：属性 'controls' 在类型 'AbstractControl'

上不存在

这是我的代码：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Reactive Form - Nested FormGroups';

  myForm: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.buildForm();
  }

  buildForm() {

    this.myForm = this.fb.group({

      user : this.fb.group({
        'firstName': new FormControl('', Validators.required),
        'lastName': new FormControl('', Validators.required)
      }),

      'bio': new FormControl()
    });
  }
}

我的问题在于验证，请参阅 div 和 class="validation-message"

<hello name="{{ name }}"></hello>

<form [formGroup]="myForm">
  <div class="my-box" formGroupName="user">
    <label>
      First Name
      <input type="text" formControlName="firstName">
      <div class="validation-message" *ngIf="!myForm.controls.user.controls['firstName'].valid && myForm.controls.user.controls['firstName'].dirty">
        This field is invalid
      </div>
    </label>
  </div>
  <div class="my-box" formGroupName="user">
    <label>
      Last Name
      <input type="text" formControlName="lastName">
    </label>
  </div>
  <div class="my-box">
    <label for="bio" class="block-me">Bio</label>
    <textarea formControlName="bio"></textarea>
  </div>
</form>

<p>
  Data from form: {{ myForm.value | json }}
</p>

Answer 1

您的 TypeScript 代码中有拼写错误：

 user : this.fb.group({
    'firstname': new FormControl('', Validators.required),
    'lastName': new FormControl('', Validators.required)
  })

字段 firstname 全部小写，但在 HTML 中是驼峰式：

<input type="text" formControlName="firstName">

字段名称区分大小写。

在你的情况下，你的 TypeScript 应该是这样的：

 user : this.fb.group({
    'firstName': new FormControl('', Validators.required),
    'lastName': new FormControl('', Validators.required)
  })

更新：

要访问 HTML 中的 user 表单组，您可以通过在 TypeScript 中创建 public 属性来完成：

  public get userGroup(): FormGroup {
    return this.myForm.get('user') as FormGroup;
  }

现在您可以通过以下方式在 HTML 中使用：

<div class="validation-message" *ngIf="!userGroup.controls['firstName'].valid && userGroup.controls['firstName'].dirty">
          This field is invalid
</div>

Answer 2

修复错误"Property 'controls' does not exist on type 'AbstractControl'"的解决方案是将打字稿文件中的嵌套表单项分离到它自己的控件中。代码如下：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Reactive Form - Nested FormGroups';

  myForm: FormGroup;
  userControl: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.buildForm();
  }

  buildForm() {

    this.userControl = this.fb.group({
      'firstName': new FormControl('', Validators.required),
      'lastName': new FormControl('', Validators.required)
    })

    this.myForm = this.fb.group({

      user : this.userControl,

      'bio': new FormControl()
    });
  }
}

Html 文件...

<hello name="{{ name }}"></hello>

<form [formGroup]="myForm">
  <div class="my-box" formGroupName="user">
    <label>
      First Name
      <input type="text" formControlName="firstName">
      <div class="validation-message" *ngIf="!userControl.controls['firstName'].valid && userControl.controls['firstName'].dirty">
        This field is invalid
      </div>
    </label>
  </div>
  <div class="my-box" formGroupName="user">
    <label>
      Last Name
      <input type="text" formControlName="lastName">
      <div class="validation-message" *ngIf="!userControl.controls['lastName'].valid && userControl.controls['lastName'].dirty">
        This field is invalid
      </div>
    </label>
  </div>
  <div class="my-box">
    <label for="bio" class="block-me">Bio</label>
    <textarea formControlName="bio"></textarea>
  </div>
</form>

<p>
  Data from form: {{ myForm.value | json }}
</p>

这是一个工作示例：https://stackblitz.com/edit/angular-nestedform

Angular 5 嵌套表单和验证和属性 'controls' 在类型 'AbstractControl' 上不存在

Angular 5 Nested Form and Validation and Property 'controls' does not exist on type 'AbstractControl'

typescript

angular

formgroups

Angular 5 嵌套表单和验证和 属性 'controls' 在类型 'AbstractControl' 上不存在

Angular 5 Nested Form and Validation and Property 'controls' does not exist on type 'AbstractControl'

typescript

angular

formgroups

Angular 5 嵌套表单和验证和属性 'controls' 在类型 'AbstractControl' 上不存在