Angular 2 隐藏字段的表单验证

我有一个银行贷款申请，其中包含很多输入字段，其中一些是隐藏的（隐藏字段根据一组条件动态显示）。例如，如果您选择选项 1，则会显示隐藏字段，并隐藏一些其他字段。如果您选择选项 2，某些字段将显示，其他字段将隐藏。在表单的末尾，我有一个，这意味着按钮将被禁用，直到整个表单有效，但我现在的问题是隐藏字段也得到验证，因此表单永远不会有效。有没有办法告诉 Angular 在隐藏字段时不验证字段？

我隐藏字段的方式如下例所示：

<form [formGroup]="form">

<select formControlName="loanType"> 
 <option value="0">Car loan</option>
 <option value="1">Student loan</option>
</select>

<div *ngIf="loanType === 0"> 
 <input type="text" required>
</div>

<div *ngIf="loanType === 1">
 <input type="text" required>
</div>

<button type="submit" [disabled]="!form.isValid">

</form>

您正在使用反应形式。即使这些字段对用户隐藏，但这些字段在用户中仍然处于活动状态。因此，您只需使用以下代码禁用反应字段

form.get("fieldName").disable();

在反应形式中，您不需要输入标签中的“必需”。还要添加 formControlName，如下所示。

<input formControlName="inputFieldName" type="text">

所以html文件会像

<form [formGroup]="form" novalidate>

<select formControlName="loanType"> 
 <option value="0">Car loan</option>
 <option value="1">Student loan</option>
</select>

<div *ngIf="loanType === 0"> 
 <input formControlName="inputField1" type="text">
</div>

<div *ngIf="loanType === 1">
 <input formControlName="inputField2" type="text">
</div>

<button type="submit" [disabled]="!form.isValid">

</form>

我们将 formControlName 添加到 2 个输入字段，并在 ts 文件中声明。

this.form = this.formBuilder.group({
    loanType: ["", [Validators.required]],
    inputField1: ["", [Validators.required]],
    inputField2: ["", [Validators.required]],
});

我们可以为 LoanType 字段创建值更改侦听器

this.form.get("loanType").valueChanges.subscribe((loanType) => {
    this.form.get("inputField1").disable();
    this.form.get("inputField2").disable();
    if(loanType === 1) {
         this.form.get("inputField1").enable();
    } else if (loanType === 2) {
         this.form.get("inputField2").disable();
    }
});

因此，当贷款类型为 1 时，将启用 inputField1；当贷款类型为 2 时，将启用 inputField2。

当字段被隐藏时，此表单将有效，因为它已被禁用。