我已经试着从这里效仿其他答案,但我没有成功!

我创建了一个响应式表单(即,动态),我想在任何给定的时间禁用一些字段。我的表单代码:

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>

为了方便起见,我简化了代码。我想禁用类型选择字段。我试着这样做:

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

不工作!有人有什么建议吗?


当前回答

我只是用

<input type="text" formControlName="firstName" [attr.disabled]="true || null" />

在此情况下,firstName在form.value中保持可访问

重要提示:你必须使用|| null作为默认值,这样angular才能一起删除该属性。

其他回答

我只是用

<input type="text" formControlName="firstName" [attr.disabled]="true || null" />

在此情况下,firstName在form.value中保持可访问

重要提示:你必须使用|| null作为默认值,这样angular才能一起删除该属性。

如果有表单组,只显示表单组。然后禁用所有表单控件。

formGroup = new FormGroup({
     firstName: new FormControl(''),
     lastName: new FormControl(''),
});
this.formGroup.disable();

如果要使用禁用的表单输入元素(如正确答案中建议的那样) 如何禁用输入)验证他们也将被禁用,请注意!

(如果你使用的是提交按钮,如[disabled]="!Valid "它会将你的字段排除在验证之外)

如果你想先禁用(formcontrol),那么你可以使用下面的语句。

this.form.first.disable ();

当使ReactiveForm:[定义属性disbaled在FormControl]

 'fieldName'= new FormControl({value:null,disabled:true})

html:

 <input type="text" aria-label="billNo" class="form-control" formControlName='fieldName'>