How to enable or disable the submit button thru radio button in angular

Question

here's the code:

list.component.html

<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
              <label nz-radio nzValue="passed">Passed</label>
              <label nz-radio nzValue="failed">Failed</label>
            </nz-radio-group>
<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="disableSubmitBtn()">
  <span translate>Submit</span>
</button>

When it select the passed it should enabled the submit button if it select the failed it should disabled the submit button

also you are using formControlname and ngModel together which is not the correct way. you should use one. — Mridul
– Mridul, Commented Dec 12, 2019 at 5:10
@Mridul if I remove the formControlname and ngModel there will be ann error — ABC
– ABC, Commented Dec 12, 2019 at 5:22

Mridul · Accepted Answer · 2019-12-12 05:08:46Z

2

just a small change in your code

<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
          <label nz-radio nzValue="passed">Passed</label>
          <label nz-radio nzValue="failed">Failed</label>
        </nz-radio-group>
<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="radioValue == 'failed'">
    <span translate>Submit</span>
</button>

answered Dec 12, 2019 at 5:08

Mridul

1,3661 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ABC Over a year ago

how'bout when you apply it on ts?

Mridul Over a year ago

in that case you need to take a variable on your ts file example: isDisabled: boolean; and on your html [disabled]="isDisabled" by default it will be false. then under ngModelChange function you need to check the radio button value if radioValue is failed then you can make isDisabled = true;

Shubham Sali · Accepted Answer · 2019-12-12 05:20:59Z

2

You just change following line

 <button class="mr-1" nz-button nzType="primary" type="button" [disabled]="!radioValue ? 'disabled': null">

answered Dec 12, 2019 at 5:20

Shubham Sali

4822 silver badges9 bronze badges

Comments

Yash Rami · Accepted Answer · 2019-12-12 05:09:40Z

1

You can try like this

<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
              <label nz-radio nzValue="passed">Passed</label>
              <label nz-radio nzValue="failed">Failed</label>
            </nz-radio-group>
<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="radioValue == 'passed' ? 'false' : 'true'">
  <span translate>Submit</span>
</button>

answered Dec 12, 2019 at 5:09

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

Comments

nXn · Accepted Answer · 2019-12-12 05:12:40Z

1

You may asssign true or false value to radio button to identify pass or fail. And use this condition to enable or disable button.

<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
              <label nz-radio nzValue="true">Passed</label>
              <label nz-radio nzValue="false">Failed</label>
            </nz-radio-group>
<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="nzValue" >
  <span translate>Submit</span>
</button>

answered Dec 12, 2019 at 5:12

nXn

9446 silver badges13 bronze badges

Comments

Ali Wahab · Accepted Answer · 2019-12-12 05:44:27Z

1

The best and efficient way to achieve this is to use custom validators in angular forms.

import { ValidationErrors, AbstractControl } from '@angular/forms';

export class CustomValidator{
    static checkIfPassed (control: AbstractControl): ValidationErrors | null {
        if (control.value == 'passed') {
            return { shouldbepassed: true }
        }
        return null;
    }
}

Then use this validator in you angular forms.

passed: ['', [Validators.required, checkIfPassed]],
failed: ['', [Validators.required, checkIfPassed]],

answered Dec 12, 2019 at 5:44

Ali Wahab

5927 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to enable or disable the submit button thru radio button in angular

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related