Javascript 角度4如何显示隐藏嵌套表单组验证

我正在进行angular 4验证。我有一个反应式表单，它有两个单选按钮和两个表单组。若用户选择第一个单选按钮，它将从第二个表单组中删除验证，并在第一个表单组中添加验证；若用户选择第二个单选按钮，它将在第二个表单组中添加验证，并从第一个表单组中删除验证

下面是我的表单组示例

this.mainForm = this.formBuilder.group({
    cardOrBank: new FormControl(''),
    cardDetails: new FormGroup({
        cardNo: new FormControl(''),
        cvv: new FormControl('')
    }),
    bankDetails: new FormGroup({
        accNo: new FormControl(''),
        ifsc: new FormControl('')
    })
});

HTML

选择：卡片
银行
卡号：
CVV：
附件编号：
国际单项体育联合会：
提交

如果选择card from单选按钮，它将在cardDetails表单上添加验证，并从bankDetails中删除验证，反之亦然

备注：表单字段可能会根据需要更多

---

谢谢。

我假设cardOrBank表单控件有两个值“card”和“bank”。在您的ngOnInit中，您应该订阅单选按钮表单控件的值更改

ngOnInit() {
 this.mainForm.get('cardDetails').valueChanges.subscribe((cardOrBank) => {
   if(cardOrBank === 'card') {
     this.mainForm.get('cardDetails').setValidators(Validators.required); 
     this.mainForm.get('bankDetails').removeValidators(Validators.required);

   } else {
     this.mainForm.get('bankDetails').setValidators(Validators.required); 
     this.mainForm.get('cardDetails').removeValidators(Validators.required);

   }                
   this.mainForm.get('bankDetails')updateValueAndValidity();                
   this.mainForm.get('cardDetails')updateValueAndValidity();

 });
}

您的单选按钮应具有值属性

 <div>
      Select: <input type="radio" value="card" formControlName="cardOrBank"> card
      <input type="radio" value="bank" formControlName="cardOrBank"> bank
 </div>

选择：卡片
银行

您可以这样做

addValidation() {
   this.form.get('title').setValidators([Validators.required, Validators.minLength(3)]);
   this.form.get('title').updateValueAndValidity();
}

removeValidation() {
 this.form.get('title').clearValidators();
 this.form.get('title').updateValueAndValidity();
}

---

您可以做两件事，要么放入显式方法，要么订阅formControlName发生的更改以执行此验证程序切换

如果要订阅，请在ngOnInit（）生命周期挂钩上订阅：

      ngOnInit() {
         this.mainForm.get('cardDetails').valueChanges.subscribe((val) => {
           if(val === 'card') {
             this.mainForm.get('cardDetails').setValidators(Validators.required);
           } else {
             this.mainForm.get('bankDetails').removeValidators(Validators.required);
           }
         this.mainForm.get('bankDetails').updateValueAndValidity();
         });
        }

**add Value attribute in the html.**

**2nd Option :**



Select: <input type="radio" formControlName="cardOrBank (change)="changedPayment('card')"> card
 <input type="radio" formControlName="cardOrBank (change)="changedPayment('bank')> bank


    changedPayment(val) {
     if(val === 'card') {
             this.mainForm.get('cardDetails').setValidators(Validators.required);
           } else {
             this.mainForm.get('bankDetails').removeValidators(Validators.required);
           }
         this.mainForm.get('bankDetails').updateValueAndValidity();
    }

ngOnInit（）{
this.mainForm.get（'cardDetails'）.valueChanges.subscribe（（val）=>{
如果（val==‘卡’）{
this.mainForm.get（'cardDetails'）.setValidators（Validators.required）；
}否则{
this.mainForm.get（'bankDetails'）.removeValidators（Validators.required）；
}
this.mainForm.get（'bankDetails'）.updateValueAndValidity（）；
});
}
**在html中添加Value属性**
**第二种选择：**
选择：在做了大量工作之后，我终于能够做到这一点

以下是您需要在代码中进行的更改：


//在component.ts文件中：
//编写两个genric方法来设置和清除验证器
setRequireValidator（格式：任意）{
for（form.controls中的const字段）{/'field'是一个字符串
设con=form.get（field）；//“control”是一个FormControl
con.setValidators（[需要验证]）；
con.updateValueAndValidity（）；
}
}
removeValidator（形式：任意）{
console.log（'form control'，form）；
for（form.controls中的const字段）{/'field'是一个字符串
设con=form.get（field）；//“control”是一个FormControl
con.clearValidators（）；
con.updateValueAndValidity（）；
}
//初始化表单ragister时，`cardOrBank'上值的事件已更改`
//检查用户选择的值，并相应地在它们之间切换
this.mainForm.get（'cardOrBank'）.valueChanges.subscribe（（val）=>{
const cardControl=this.mainForm.get（'cardDetails'）；
const bankControl=this.mainForm.get（'bankDetails'）；
如果（val==‘卡’）{
警报（'card sletecd'）
此。移除验证器（bankControl）；
此.setRequireValidator（cardControl）；
}否则{
警报（'银行sletecd'）
此。移除验证器（cardControl）；
此。setRequireValidator（银行控制）；
}
});


卡片
银行
卡号：
CVV：
附件编号：
国际单项体育联合会：
提交
您能提供一个工作示例吗？请与我们分享您的代码，以便我们能够帮助您。与我们分享您的HTMLQ更新…尝试建议您必须根据单选按钮单击添加和删除验证感谢您的回复Bear Nithi…我必须在选择cardDetails时删除bankDetails formGroup validation并添加ban选择bankDetails时进行kDetails验证…可能我不确定，但是setValidators（）函数用于formControl，而不是formGroup。只想确认我已更新代码，以在单选按钮选择时删除验证程序
      ngOnInit() {
         this.mainForm.get('cardDetails').valueChanges.subscribe((val) => {
           if(val === 'card') {
             this.mainForm.get('cardDetails').setValidators(Validators.required);
           } else {
             this.mainForm.get('bankDetails').removeValidators(Validators.required);
           }
         this.mainForm.get('bankDetails').updateValueAndValidity();
         });
        }

**add Value attribute in the html.**

**2nd Option :**



Select: <input type="radio" formControlName="cardOrBank (change)="changedPayment('card')"> card
 <input type="radio" formControlName="cardOrBank (change)="changedPayment('bank')> bank


    changedPayment(val) {
     if(val === 'card') {
             this.mainForm.get('cardDetails').setValidators(Validators.required);
           } else {
             this.mainForm.get('bankDetails').removeValidators(Validators.required);
           }
         this.mainForm.get('bankDetails').updateValueAndValidity();
    }