选中角复选框时，默认启用禁用输入字段。

Question

我正在创建一个表单组，其中有一个角13的复选框。在这里，默认情况下，接收代码字段是禁用的。当复选框被选中时，我如何启用此输入字段?如果不启用，如何启用此输入字段？

在我的.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，并相应地修改receiver_code的禁用状态：

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才能访问它们。

另外，FYI，您在使用反应性表单时不使用disabled属性。毫无疑问，角已经在控制台中显示了这方面的警告。

Answer 2

您只需使用垫子复选框的“输出”更改即可。

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

请参阅带有两个参数的stackblitz

注意:并不总是需要“更改”我们的FormGroup。如果只想更改.html的“外观”，最好使用不属于FormGroup或其他方法的新变量