angular4 form 表單中 input輸入框的disabled屬性 (實用）

原文出處：https://www.cnblogs.com/leiting/p/8603604.html

直接加[disabled]="isDisabled"屬性的話，出現報錯

根據提示，做如下修改
ts

private isEdit: boolean = true;
private isDisabled = true;
private myForm: FormGroup;

private roleParams = {
roleName:'',
items:['全部權限']
}

ngOnInit() {
    this.routerIonfo.params.subscribe((params: Params) => { // 如果想要獲取查詢參數中的值例如 /index?id=1 把這一句的params換成queryParams就好了，取的方法和下面一樣
　　// 這裏是從url參數中取參數的方法，獲取的是後面的值如 /page/0 獲取的是參數值0
    this.isEdit = Number(params['id']) !== 0; // 0:添加，!0編輯
    this.roleParams.roleName = params['id'];
});
    this.createOrEdit();
    this.creatForm();
}

createOrEdit(){
    if(this.isEdit){ // 如果是編輯的時候，就禁用掉該輸入框
    this.isDisabled = true;
    return;
}
    this.isDisabled = false;
    this.creatForm();
}

// 在初始化表單的時候設置表單中input的屬性值，禁用的話 disabled:true
creatForm() {
    this.myForm = this.fb.group({
      roleName:[{ value:this.roleParams.roleName,disabled:this.isDisabled}]
    });
  }

html

<!--雙向綁定，控制輸入框的是否禁用屬性-->
<input class="text-big" type="text" [(ngModel)]="roleParams.roleName" formControlName="roleName">