如何通过角度单选按钮启用或禁用提交按钮

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

Answer 1

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>

Answer 2

您只需更改以下行

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

Answer 3

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>

Answer 4

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>

Answer 5

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