Question

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

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

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

Answer 1

更新：

在做了一些研究之后，我发现我需要使用FormGroup.addControl（）和FormGroup.removeControl（）动态更新formGroup。

我读到的文章得出的结论是： https://github.com/angular/angular/issues/7970（检查卡拉斯答案）

https://scotch.io/tutorials/how-to-implement-conditional-validation-in-angular-2-model-driven-forms

只是举例说明我的代码对于具有相同问题的下一个人的代码：

if (this.loanTypeId === 1) {
   this.form.addControl('name', new FormControl("", Validators.required));
} else {
   this.form.removeControl('name')
}

Answer 2

您正在使用反应形式。甚至用户也看不到这些字段，这些字段在from中处于活动状态。因此，只需使用以下代码即可从反应式中禁用该字段

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。

由于禁用了此字段，因此在隐藏字段时此表单将有效。

Answer 3

首先，您可以创建选项组的模板基础。我们可以在模板中使用 * ngIf 来隐藏和显示表单中的元素组。然后，每次仅启用启用的那些表单控件的对象时，使用formBuilder创建表单的表单实例。

示例

    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="name">First Name:</label>
<input type="text" formControlName="fname"
placeholder="Enter name">
<br /><br />
<div *ngIf="lNameEmail1">
<label for="name">Last Name:</label>
<input type="text" formControlName="lname"
placeholder="Enter name">
<br /><br />

<label for="email">Email:</label>
<input type="email" formControlName="email"
placeholder="Enter email">
</div>
<div *ngIf="lNameEmail2">

<label for="name">Last Name2:</label>
<input type="text" formControlName="lname2"
placeholder="Enter name">

<br /><br />

<label for="email">Email2:</label>
<input type="email" formControlName="email2"
placeholder="Enter email">
</div>
<br /><br />
<button type="submit" [disabled]="!myForm.valid">Submit
</button>
<button type="submit" (click)='formGrp1()'> Form 1</button>
<button type="submit" (click)='formGrp2()'> Form 2</button>
</form>

Angularr类

export class AppComponent implements AfterViewInit {
    public myForm: FormGroup;
    lNameEmail1 = false;
    lNameEmail2 = false;
    myFormProperty1 = {
    "fname": new FormControl("", Validators.required)
    };

    myFormProperty2 = {
    "fname": new FormControl("", Validators.required),
    "lname": new FormControl("", Validators.required),
    "email": new FormControl("")

    };
    myFormProperty3 = {
    "fname": new FormControl("", Validators.required),
    "lname2": new FormControl("", Validators.required),
    "email2": new FormControl("")

    };

    constructor(public fb: FormBuilder) {
    this.myForm = this.fb.group(this.myFormProperty1);
    }


    formGrp1(){
    alert('Form 1 enable')

    this.lNameEmail1 = true;
    this.lNameEmail2 = false;

    this.myForm = this.fb.group(this.myFormProperty2);


    this.myForm.valueChanges.subscribe(data =>
    console.log('form object ====' + JSON.stringify(data)
    )); 
    }
    formGrp2(){
    alert('Form 2 enable')

    this.lNameEmail1 = false;
    this.lNameEmail2 = true;

    this.myForm = this.fb.group(this.myFormProperty3);

    this.myForm.valueChanges.subscribe(data =>
    console.log('form object ====' + JSON.stringify(data)
    )); 

    }
    onSubmit() {
    console.log('Form submitted Value=='+ JSON.stringify(this.myForm.value));
    }



    }

隐藏字段上的Angular 2表单验证

3 个答案: