Javascript 如何通过angular中的单选按钮启用或禁用submit按钮

代码如下：

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]="radioValue == 'failed'">
    <span translate>Submit</span>
</button>

你可以这样试试

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

---

您可以将true或false值指定给单选按钮，以标识通过或失败。并使用此条件启用或禁用按钮

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

---

你只要换一行就行了

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

---

实现这一点的最佳和有效的方法是以角度形式使用自定义验证器

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

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

然后在您的表单中使用这个验证器

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

---

另外，您正在同时使用formControlname和ngModel，这不是正确的方法。您应该使用一个。@Mridul如果我删除formControlname和ngModel，将出现错误。您需要根据您的要求保留一个：好的，谢谢@mridul在ts上应用它时如何？在这种情况下，您需要在ts文件上使用一个变量示例：isDisabled:boolean；在您的html上，默认情况下[disabled]=isDisabled将为false。然后，在ngModelChange函数下，您需要检查单选按钮值。如果radioValue失败，则可以使isDisabled=true；

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