嵌套的反应形式与所需的验证器成角度

Question

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

这并不像预期的那样起作用。有什么想法吗？谢谢

Answer 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>