Angular Reactive Forms：将 .controls 属性与 formGroupName 一起使用答案

【问题标题】：Angular Reactive Forms: Use .controls property with formGroupNameAngular Reactive Forms：将 .controls 属性与 formGroupName 一起使用
【发布时间】：2018-05-07 01:58:11
【问题描述】：

我很好奇是否可以在 Angular Reactive 表单中使用 myForm.controls 属性，而不是为每个实例定义一个 AbstractControl？

NG-Book 中建议使用此方法，但不适用于嵌套表单和 FormGroupName。

这是我的代码。

HTML：

<form [formGroup]="myForm"
    (ngSubmit)="onSubmit(myForm.value)">
<div>
  <input type="text"
         id="nameInput"
         placeholder="Product"
         [formControl]="myForm.controls['name']">
   <div *ngIf="myForm.controls['name'].hasError('required')">Name is 
   required</div>
</div>
<div formGroupName="address">
  <input type="text"
         id="streetInput"
         placeholder="Enter Street"
         [formControl]="myForm.controls['street']">
   <div *ngIf="myForm.controls['street'].hasError('required')">Street is required</div>
</div>
<button type="submit" class="ui button">Submit</button>

JS：

export class App {
  myForm: FormGroup;

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      'name':  ['', Validators.required],
      'address': fb.group({
        'street': ['', Validators.required],
      });
    } 
  }
}

我意识到我可以在输入上设置formControlName="street"，但我想我必须使用 AbstractControl 来确定它的验证状态。在我的非嵌套 formGroup 中，我可以使用 myForm.controls['name'].hasError('required')。

【问题讨论】：

Plunker

标签： javascript angular formbuilder angular-reactive-forms formgroups

【解决方案1】：

我不知道，我很理解你的问题。

您想从控件中获得有关嵌套的验证吗？

然后，你可以得到myForm.get('address').control['street'].hasError('required')或myForm.get('address').get('street').hasError('required')

您可以将hasError('required') 更改为errors.required。

这些链接是关于表单验证的描述。

https://angular.io/api/forms/FormGroup#example-4

https://angular.io/guide/form-validation#reactive-form-validation

如果我误解了你的问题，请发表评论。

【讨论】：

是的，这正是我所需要的。我让它与myForm.get('address').control['street'].hasError('required') 一起工作。谢谢！我还必须在输入上将[formControl]="myForm.controls['street']" 更改为formControlName="street"。不过，这部分对我来说仍然有点令人困惑。如果它没有嵌套，则需要在输入上为[formControl]="addGymForm.controls['name']"。为什么嵌套 formGroups 的语法如此简单？
编辑：如果它没有嵌套，它需要在输入上是[formControl]="myForm.controls['street']"。为什么嵌套 formGroups 的语法如此简单？
我不明白你的问题。你的问题是“nested formgroup 的语法比not nested formgroup 更简单吗？”