Angular 4, как показать скрытие вложенной проверки группы форм

Question

Я работаю над угловым 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

<form [formGroup]="mainForm" (ngSubmit)="onFormSubmit()">
    <div>
        Select: <input type="radio" formControlName="cardOrBank"> card
        <input type="radio" formControlName="cardOrBank"> bank
    </div>
    <div formGroupName="cardDetails">
        <div>
            Card No: <input formControlName="cardNo">
        </div>
        <div>
            CVV: <input formControlName="cvv">
        </div>
    </div>
    <div formGroupName="bankDetails">
        <div>
            ACC No: <input formControlName="accNo">
        </div>
        <div>
            IFSC: <input formControlName="ifsc">
        </div>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

Если выбрать карту из переключателя, это добавит проверку в форму cardDetails и удалит проверку из bankDetails и наоборот.

PS: поля формы могут быть больше в соответствии с требованием.

Спасибо.

Answer 1

После проделанной большой работы наконец я смог добиться этого.

Ниже приведены изменения, которые необходимо внести в код:

// in component.ts file  : 


// Write two genric methods which sets and clears the validator 

setRequireValidator(form:any){
  for (const field in form.controls) { // 'field' is a string
   let con = form.get(field); // 'control' is a FormControl
    con.setValidators([Validators.required]);
    con.updateValueAndValidity();
}

}

removeValidator(form:any){
  console.log('form contro',form);
  
  for (const field in form.controls) { // 'field' is a string
   let con = form.get(field); // 'control' is a FormControl
    con.clearValidators();
    con.updateValueAndValidity();
}
  
 
 // while initiallizing the form ragister the event for value changed on `cardOrBank`

// check which value user has selected and accordingly toggle between them 


 this.mainForm.get('cardOrBank').valueChanges.subscribe((val) => {
        const cardControl = this.mainForm.get('cardDetails');
        const bankControl = this.mainForm.get('bankDetails');
           if(val === 'card') {
           alert('card sletecd')
           this.removeValidator(bankControl);
          this.setRequireValidator(cardControl);

        } else{
             alert('bank sletecd')
          this.removeValidator(cardControl);
          this.setRequireValidator(bankControl);      
        }
   
 });
 
 
 

<!-- In component.html file-->


<form [formGroup]="mainForm" (ngSubmit)="onFormSubmit()">
    <div>
      <label>
      <!-- You missed value attribute --> 
     <input type="radio" value="card" formControlName="cardOrBank">
       <span>Card</span>
   </label>
   <label>
     <input type="radio" value="bank" formControlName="cardOrBank">
       <span>Bank</span>
   </label>
    </div>
    <div formGroupName="cardDetails">
        <div>
            Card No: <input formControlName="cardNo">
        </div>
        <div>
            CVV: <input formControlName="cvv">
        </div>
    </div>
    <div formGroupName="bankDetails">
        <div>
            ACC No: <input formControlName="accNo">
        </div>
        <div>
            IFSC: <input formControlName="ifsc">
        </div>
    </div>
    <div>
        <button type="submit" [disabled]="!mainForm.valid">Submit</button>
    </div>
</form>

Вот рабочий пример вашего требования:

Рабочая демонстрация

Answer 2

вы можете сделать так

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();
}

Answer 3

Вы можете сделать две вещи, либо вы можете указать явный метод, либо вы можете подписаться на изменения, происходящие с 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();
    }

Answer 4

Я предполагаю, что элемент управления формы cardOrBank имеет два значения: «карта» и «банк».В вашем ngOnInit вы должны подписаться значенияChanges элемента управления формы переключателя.

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>