ionic3 解决FormGroup里面的disabled的wa
2018-05-17 本文已影响0人
云小诺
我要做的是:当点击修改,input和select变成可输入可修改的状态;点击确认,则变成不可修改的状态。
<ion-item>
<ion-input type="text" formControlName="aaa" [readonly]="isReadonly"></ion-input>
</ion-item>
<ion-item>
<ion-select formControlName="bbb" [disabled]="isReadonly">
<ion-option selected="{{selectedBbb == bb}}" *ngFor="let bb of bbs" value={{bb}}>{{bb}}</ion-option>
</ion-select>
</ion-item>
input写[readonly]="isReadonly",是完全OK的,但是select写[disabled]="isReadonly"就会有warning出现:
好吧,图片上传不上来了,把waring粘出来吧:
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
于是,我就按照提示来写了:
this.xxxForm = this.formBuilder.group({
aaa: new FormControl(data.aaa, Validators.required),
bbb: new FormControl({ value: data.bbb, disabled: true }, Validators.required),
});
但是这么写,只是初始化了你的disabled的值。如果你的页面只是简单的禁止这么写就OK了,
如果你想改变disabled的true和false,那么请看下面代码:
clickAAA() {
this.workdetailForm.get("bbb").enable();
}
clickBBB() {
this.xxxForm.get("bbb").disable();
}
ok,到此结束,亲测有效。