角反应性形式:使用.Controls属性与FormGroupName

Question

我很好奇是否可以使用角反应性形式使用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来确定其验证状态。就像在我的非巢格组中一样，我只能使用 myForm.controls['name'].hasError('required')。

Answer 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

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