Angular 6 嵌套 FormGroup 模板验证

Question

我的表单组结构如下所示（order.component.ts）：

this.orderForm = this.formBuilder.group({
  customer: this.formBuilder.group({
    name: ['', Validators.required],
    phone: ['', Validators.required],
    email: ['', Validators.required]
  }),
  ...
});

在模板（order.component.html）中，我有：

<form [formGroup]="orderForm" (ngSubmit)="onSubmit()">
  <fieldset formGroupName="customer">
    <legend>Customer Information</legend>
    <label for="name">Full name:</label>
    <input type="text" formControlName="name" class="form-control" name="name" id="name" required>
    <small class="form-text text-danger" *ngIf="orderForm.controls['customer'].controls['name'].invalid && (orderForm.controls['customer'].controls['name'].dirty || orderForm.controls['customer'].controls['name'].touched)">Name invalid</small>
  </fieldset>
  ...
</form>

这是有效的，但是一种更短的表达方式orderForm.controls['customer'].controls['name']吗？例如，将 *ngIf 条件设为更简洁"name.invalid && (name.dirty || name.touched)"

Answer 1

是的，这是获取嵌套表单 Control 的正确方法，没有快捷方式。

或者您可以在组件中创建一些指向orderForm.get('customer')表单对象的属性

private customerForm : FormGroup

并在表单初始化后分配它

this.customerForm = this.orderForm.get('customer')

并像这样获取它{{customerForm.get('name').valid}}