如何使提交按鈕以角度啟用

Question

這是代碼：

列表.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>

    <div *ngIf="radioValue ==='failed'>
       <textarea nz-input placeholder="Remarks" class="remarks-textarea" type="text" name="otherRemark"
              formControlName="otherRemark" [(ngModel)]="otherRemark"
              [nzAutosize]="{ minRows: 3, maxRows: 3 }"></textarea>
    </div>
    <button class="mr-1" nz-button nzType="primary" type="button" [disabled]="disableSubmitBtn()"
      [nzLoading]="formLoading" (click)="saveFormData()">
      <span translate>Submit</span>
    </button>

列表.component.ts

  disableSubmitBtn() {
       if (!this.otherRemark) {
          return true;
       }
  }

選擇passed的角度時如何enable提交按鈕。

我想要的是，在選擇passed的radio button它應該enable submit button如果它選擇failed ， button被disabled ，它應該首先填寫備注，這是函數disableSubmit()所在的textarea

if (!this.otherRemark) {
    return true;
}

提前致謝

Answer 1

您正在使用[(ngModel)]="radioValue"所以選項值與更新ngModel

嘗試這個：

disableSubmitBtn() {
  if (this.otherRemark.length == 0 || this.radioValue != "passed" ) {
    return true;
  } else if(this.radioValue = "passed" ) {
    return false;      
  }
}

Answer 2

嘗試這個：

 <button [disabled]="radioValue === 'passed' ?  !(radioValue === 'passed') : !(radioValue === 'failed' && otherRemark)" class="mr-1" nz-button nzType="primary" type="button" 
    [nzLoading]="formLoading" (click)="saveFormData()">
      <span translate>Submit</span>
 </button>

Answer 3

disableSubmitBtn() {
  if (this.radioValue === 'passed') {
    return false;
  } else if (!this.otherRemark) {
    return true;
  }
}

它可能會幫助你

Answer 4

我遵循的最簡單的方法是這樣的： [disabled]="(radioValue !== 'passed') || (radioValue !=='failed' && !otherRemark)"

這將在不passed單選值時添加啟用按鈕。 因此，如果用戶選擇了除了passed任何其他值，它會被禁用。

完整的 html 示例：

<button [disabled]="(radioValue !== 'passed') || (radioValue !=='failed' && !otherRemark)" class="mr-1" nz-button nzType="primary" type="button" [nzLoading]="formLoading" (click)="saveFormData()">
      <span translate>Submit</span>
 </button>