Angular 5嵌套形式、验证和属性'；控件'；不存在于类型'；抽象控制&x27；

我已经设置了一个嵌套的formgroup。到目前为止一切正常。但我不知道当存在嵌套表单元素时，如何正确设置验证警报

发生的一件特别的事情是在构建过程中，我得到了一个错误： 类型“AbstractControl”上不存在属性“controls”

这是我的密码：

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()
    });
  }
}

我的问题是验证，请使用class=“validation message”查看div

名字
此字段无效
姓
生物

来自以下表单的数据：{myForm.value | json}

您的打字脚本代码中有打字错误：

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

字段

firstname

均为小写，但在HTML中为大写：

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

更新：

要访问HTML中的

user

表单组，您可以通过在TypeScript中创建公共属性来执行以下操作：

  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>

此字段无效

您的打字脚本代码中有打字错误：

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

字段

firstname

均为小写，但在HTML中为大写：

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

更新：

要访问HTML中的

user

表单组，您可以通过在TypeScript中创建公共属性来执行以下操作：

  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>

此字段无效

修复错误“类型“AbstractControl”上不存在属性“controls”的解决方案是将typescript文件中的嵌套表单项分离到自己的控件中。代码如下：

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>

名字
此字段无效
姓
此字段无效
生物

来自以下表单的数据：{myForm.value | json}

---

下面是一个工作示例：

修复错误“类型“AbstractControl”上不存在属性“controls”的解决方案是将typescript文件中的嵌套表单项分离到自己的控件中。代码如下：

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>

名字
此字段无效
姓
此字段无效
生物

来自以下表单的数据：{myForm.value | json}

---

这里有一个工作示例：

试试

myForm.get（'user.firstName'）

这是否回答了您的问题？可以试试看

myForm.get（'user.firstName'）

这是否回答了您的问题？可以使用一个好的捕获@kat1330。那是我很快就完成了这次闪电战。现在剩下的唯一问题是修复生成问题，我得到“属性'controls'在类型'AbstractControl'上不存在”。我将对答案进行编辑。@iChido我更新了答案。您还可以将ts文件中的

user

组提取为属性，并在HTML中使用该属性。请参阅更新的答案。如果有许多嵌套组，这种方法也是一种很好的方法。那是我很快就完成了这次闪电战。现在剩下的唯一问题是修复生成问题，我得到“属性'controls'在类型'AbstractControl'上不存在”。我将对答案进行编辑。@iChido我更新了答案。您还可以将ts文件中的

user

组提取为属性，并在HTML中使用该属性。请参阅更新的答案。如果有许多嵌套组，这种方法也是一种很好的方法。