angular 2 formbuilder conditional validating input

Question

I am using angular 2 formbuilder to create a form and I want to conditionally validate the input field according to radio box input changes.when I click percentage radio box the percentage input should be validated. When I click amount radio box it should validate amount input field.

HTML Code

(I am using material input components)

<md-radio-group formControlName="splitType" (click)="splitTypeClicked()">
      <md-radio-button value="amount">Amount</md-radio-button>
      <md-radio-button value="percentage">Percentage</md-radio-button>
</md-radio-group>
  
<input  mdInput  placeholder="Amount" formControlName="amount"  >
<input  mdInput   placeholder="Percentage" formControlName="percentage"  >

Angular 2 Component

constructor(private fb: FormBuilder){}
   
  ngOnInit() {

    this.splitChargeForm = this.fb.group({
      splitType: ['', Validators.required],
      amount: [''],        //validate when splitType = amount
      percentage: ['']     //validate when splitType = percentage

   });

you hide/show and disable/ enable input on click?

Shailesh Ladumor
– Shailesh Ladumor

2017-07-26 05:55:03 +00:00
Commented Jul 26, 2017 at 5:55 — Shailesh Ladumor
– Shailesh Ladumor, Commented Jul 26, 2017 at 5:55
yes hide/show when clicking radio buttons

Manoj Sanjeewa
– Manoj Sanjeewa

2017-07-26 06:20:31 +00:00
Commented Jul 26, 2017 at 6:20 — Manoj Sanjeewa
– Manoj Sanjeewa, Commented Jul 26, 2017 at 6:20
ok i update my answer

Shailesh Ladumor
– Shailesh Ladumor

2017-07-26 06:26:27 +00:00
Commented Jul 26, 2017 at 6:26 — Shailesh Ladumor
– Shailesh Ladumor, Commented Jul 26, 2017 at 6:26
you can try 2nd solution

Shailesh Ladumor
– Shailesh Ladumor

2017-07-26 06:34:47 +00:00
Commented Jul 26, 2017 at 6:34 — Shailesh Ladumor
– Shailesh Ladumor, Commented Jul 26, 2017 at 6:34

Shailesh Ladumor · Accepted Answer · 2017-07-26 09:10:07Z

write this code into ngOnInit() method. does this help

Solution 1:

 this.splitChargeForm.get('splitType')
      .valueChanges.subscribe((value: string) => {
          if (value === 'amount') {       
               this.splitChargeForm.get('amount').setValidators(Validators.required);
               this.splitChargeForm.get('percentage').clearValidators()
          } else {
              this.splitChargeForm.get('percentage').setValidators(Validators.required);
              this.splitChargeForm.get('amount').clearValidators()
        }
    });

Solution 2:

// formBuilder

  this.splitChargeForm = this.fb.group({
      splitType: ['', Validators.required],
      amount: [{value: '', disabled: false}, Validators.required], 
      percentage: [{value: '', disabled: true}, Validators.required]
   });

// enable & disable input (write in onInit() method or cunstructor)

this.splitChargeForm.get('splitType')
          .valueChanges.subscribe((value: string) => {
              if (value === 'amount') {       
                   this.splitChargeForm.get('amount').enable;
                   this.splitChargeForm.get('percentage').disable();
              } else {
                  this.splitChargeForm.get('percentage').enable();
                  this.splitChargeForm.get('amount').disable()
            }
        });

Html should be like

<md-radio-group formControlName="splitType" (click)="splitTypeClicked()">
      <md-radio-button value="amount">Amount</md-radio-button>
      <md-radio-button value="percentage">Percentage</md-radio-button>
</md-radio-group>

<input  mdInput  placeholder="Amount" formControlName="amount" *ngIf="splitChargeForm.value.splitType === 'amount" >
<input  mdInput   placeholder="Percentage" formControlName="percentage"  *ngIf="splitChargeForm.value.splitType === 'percentage" >

Collectives™ on Stack Overflow

angular 2 formbuilder conditional validating input

HTML Code

Angular 2 Component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML Code

Angular 2 Component

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related