当复选框在角度/离子中选中时显示并启用

Question

我需要启用并显示formControlName="plane_input"如果formControlName="plane_checkbox"对它进行了检查。我将如何使用角度/离子体来做到这一点？请帮忙。谢谢。

ngOnInit(){
    this.form.get('plane_checkbox').valueChanges.subscribe(
    (plane: any) => {
        if (plane === true) {
             this.form.controls.plane_input.enable();
        } else if (plane !== true) {
             this.form.controls.plane_input.disable();
        }
        this.form.get('plane_input').updateValueAndValidity();
    });
  }
  initializeForm() {
    this.form = this.fb.group({
      plane_checkbox: [false],
      plane_input:  new FormControl({value: '', disabled: true}),
    });
  }

html

<ion-item>
    <ion-label>Do you have a Plane</ion-label>
    <ion-checkbox formControlName="plane_checkbox" [checked]="plane_checkbox"></ion-checkbox>
</ion-item>
<ion-item>
    <ion-label>Plane Details</ion-label>
    <ion-input type="text" formControlName="plane_input"></ion-input>
</ion-item>

Answer 1

内部演示.html

 <ion-item>
        <ion-label>Do you have a Plane</ion-label>
        <ion-checkbox  [(ngModel)]="plane_checkbox"></ion-checkbox>
      </ion-item>
    <ion-item *ngIf="plane_checkbox">
        <ion-label>Plane Details</ion-label>
        <ion-input type="text" ></ion-input>
    </ion-item>

内部演示

plane_checkbox:boolean=true; //declare and initialized variable with true or false

Answer 2

模板：

<ion-checkbox formControlName="plane_checkbox" (ionChange)="checkboxChange($event.checked)"></ion-checkbox>

元件：

ngOnInit(){
    initializeForm();
}
initializeForm() {
    this.form = this.fb.group({
      plane_checkbox: [{ value: false, disabled: false }],
      plane_input: [{ value: '', disabled: true }],
    });
}
checkboxChange(checked: boolean){
    if(checked){
        this.form['controls'].plane_input.enable();
    } else {
        this.form['controls'].plane_input.disable();
    }
}