文章内容

2021/6/2 11:37:15,作 者: 黄兵

mat-select disabled

今天在使用Angular 10编写代码的时候,浏览器出现了如下⚠:

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

解决方案:

regionFormControl: FormControl = new FormControl({value: null, disabled: true}, Validators.required);
cityFormControl: FormControl = new FormControl({value: null, disabled: true});

这里初始化的时候是禁用。

之后在需要启用的地方:

getRegion(countryId: number): void {
this.sub = this.crawlerService.getAllRegions(countryId).subscribe(res => {
this.regionModel = res;
}, error => {
this.errorMessages.push({description: error.message});
}, () => {
this.regionFormControl.enable();
});
}

这样就可以启用了。


参考资料:

1、Reactive forms - disabled attribute


黄兵个人博客原创。

转载请注明出处:黄兵个人博客 - mat-select disabled

分享到:

发表评论

评论列表