禁用反应性形式的输入字段

Question

我已经试图从这里跟随其他答案的例子，但我没有成功！

我创建了一个反应式表单（即动态表单），并希望在任何给定时间禁用某些字段。我的表格代码：

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

我的html：

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      <select formArrayName="value">
        <option></option>
        <option>{{ opt.controls.value }}</option>
      </select>
    </div>
  </div>
</div>

我减少了代码以方便使用。我想禁用select类型的字段。我试着做到以下几点：

form = new FormGroup({
  first: new FormControl({value: '', disabled: true}, Validators.required),
});

不行！有人有什么建议吗？

Answer 1

我通过将输入对象的标签包装在字段集中解决了这个问题：字段集应该将禁用属性绑定到布尔值

 <fieldset [disabled]="isAnonymous">
    <label class="control-label" for="firstName">FirstName</label>
    <input class="form-control" id="firstName" type="text" formControlName="firstName" />
 </fieldset>

Answer 2

注意注意

如果您正在使用一个用于条件的变量创建一个表单，并试图稍后更改它，它将无法工作，即表单不会更改。

例如

this.isDisabled = true;
    
this.cardForm = this.fb.group({
    number: [{value: null, disabled: this.isDisabled},
});

如果你改变变量

this.isDisabled = false;

形式不会改变。你应该使用

这卡片形式。获取（'number'）。禁用（）；

顺便提一下

应使用patchValue方法更改值：

this.cardForm.patchValue({
    number: '1703'
});

Answer 3

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

或

this.form.controls['name'].disable();