ionic3 解决FormGroup里面的disabled的warning

我要做的是:当点击修改,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,到此结束,亲测有效。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容