具有所需验证器的角度嵌套反应形式答案

【问题标题】：Nested reactive forms in angular with required validator具有所需验证器的角度嵌套反应形式
【发布时间】：2020-10-31 11:08:16
【问题描述】：

如何将所需的验证器传递给嵌套表单？我做了一个项目来解释： https://stackblitz.com/edit/angular-nested-forms-cva-3b17dm?file=src%2Fapp%2Fbasic-info%2Fbasic-info.component.ts

这没有按预期工作。有任何想法吗？谢谢

【问题讨论】：

标签： angular-reactive-forms

【解决方案1】：

这里我以 userProfile FormGroup 为例您必须按以下方式访问

f.address.controls.city.invalid

.ts 文件应该是这样的。

export class Home implements OnInit {
  userProfileForm : FormGroup;

  ngOnInit() {
    this.userProfileForm = new FormGroup({
      'userName': new FormControl('', [Validators.required]),
      'address': new FormGroup({
        'city': new FormControl('', [Validators.required])
    })
  });
 }

}

在HTML部分，应该编辑如下。

<form [formGroup]="userProfileForm " (ngSubmit)="onSubmit()">

<div formGroupName="address">
  <input type="text" formControlName="city" />
  <ng-container *ngIf="!userProfileForm.get('address.city').valid && userProfileForm.get('address.city').touched">
    <span>This is required</span>
  </ng-container>
</div>

</form>

【讨论】：