在 angular 中選中復選框時默認啟用禁用的輸入字段

Question

我正在 Angular 13 中創建一個帶有復選框的表單組。這里，默認情況下禁用接收者代碼字段。 如何在復選框被選中時啟用此輸入字段，而在未選中時禁用？

在 my.ts 我有：

export class IntPayComponent implements OnInit { 
     paymentDetails!: FormGroup;
     disabled = true; 

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
this.paymentDetails = this._formBuilder.group({
  receiver_code: new FormControl({value:"", disabled: true})
});
}

在我的 html 模板中，我有：

<mat-stepper [linear]="isLinear" #stepper>
   <mat-step [stepControl]="paymentDetails">
      <form [formGroup]="paymentDetails">
         <div class="add-directory">
            <mat-checkbox>Add to Directory</mat-checkbox>
         </div>
         <div class="reference-field">
            <mat-form-field appearance="fill" floatLabel="always">
               <mat-label>Receiver Code</mat-label>
                  <input matInput formControlName="receiver_code"/> 
            </mat-form-field>
         </div>
      </form>
   </mat-step>
</mat-stepper>

Answer 1

你需要把復選框變成一個 FormControl，比如addDirectory ：

this.paymentDetails = this._formBuilder.group({
  receiver_code: new FormControl({value:"", disabled: true}),
  addDirectory: new FormControl(false)
});

然后，在FormGroup初始化之后，你監聽它的valueChanges Observable 並相應地修改receiver_code的 disabled state：

this.paymentDetails.get('addDirectory').valueChanges.pipe(
  takeUntil(this.destroy$), // make sure you implement an unsubscribe strategy
  tap(addCtrlValue => {
    const receiverCtrl = this.paymentDetails.get('receiver_code');
    addCtrlValue ? receiverCtrl.enable() : receiverCtrl.disable();
  })
).subscribe();

您可以通過將FormControls設置為獨立於FormGroup來使事情變得更清晰，這意味着您不必繼續調用get來訪問它們。

另外，僅供參考，在使用反應式 forms 時，您不要使用 HTML disabled屬性。毫無疑問，Angular 已在控制台中顯示了關於此的警告。

Answer 2

您可以簡單地使用 mat-checkbox 的“輸出”更改

<mat-checkbox (change)="paymentDetails.get('receiver_code')
           [$event.checked?'enable':'disable']()">
      Add to Directory
</mat-checkbox>

如果您使用簡單的輸入類型復選框（或者您不想使用（更改）事件 -

  <mat-checkbox [ngModel]="enable" 
                [ngModelOptions]="{standalone:true}"
                (ngModelChange)="enable=$event;
                  paymentDetails.get('receiver_code')[$event?'enable':'disable']()"

  >Add to Directory</mat-checkbox>

查看兩種方法的堆棧閃電戰

注意：並不總是需要“改變”我們的 FormGroup。 如果只想更改 .html 的“外觀”，最好使用不屬於 FormGroup 的新變量或其他方法