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

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

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

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


当前回答

你也可以使用attr。在HTML中禁用复选框或单选,没有在.ts文件中编码,就像这样:

<input type="checkbox" id="hasDataACheck" formControlName="hasDataA" /> <label class="form-check-label" for="hasDataACheck"> 有数据A < / >标签 <input type="text" formControlName="controlA" [attr.disabled]=" form.get(“hasDataA”)。价值吗?Null: " />

其他回答

你也可以使用attr。在HTML中禁用复选框或单选,没有在.ts文件中编码,就像这样:

<input type="checkbox" id="hasDataACheck" formControlName="hasDataA" /> <label class="form-check-label" for="hasDataACheck"> 有数据A < / >标签 <input type="text" formControlName="controlA" [attr.disabled]=" form.get(“hasDataA”)。价值吗?Null: " />

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

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

html:

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

lastName: new FormControl({value: '', disabled: true}, Validators.compose([Validators.required])),

我试图从localstorage获取值,我想要禁用电子邮件和密码字段。这招对我很管用:

email: new FormControl({value: localStorage.getItem("email"), disabled:true},[
      Validators.required,
      Validators.minLength(3),
    ]),
password: new FormControl({value: localStorage.getItem("password"), disabled:true},[
      Validators.required,
      Validators.minLength(3),
    ])

注意

如果你正在创建一个使用变量为条件的表单,并试图改变它之后,它将不会工作,即表单将不会改变。

例如

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

如果你改变变量

this.isDisabled = false;

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

this.cardForm.get(数量).disable ();

BTW.

你应该使用patchValue方法来改变值:

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