Question

如果formControlName =“plane_checkbox”对它进行检查，我需要启用并显示formControlName =“plane_input”。我如何使用Angular / Ionic做到这一点？请帮忙。感谢。

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

内部demo.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>

内部demo.ts

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();
    }
}

当复选框具有角度/离子检查时显示和启用

2 个答案: