以反应形式禁用输入字段

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

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

要么

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

Answer 2

请注意

如果您正在使用变量for condition创建表单并尝试稍后更改它将无法工作,即表单不会更改.

例如

this.isDisabled = true;

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

如果你改变了变量

this.isDisabled = false;

表格不会改变.你应该用

this.cardForm.get( '编号')禁用();

BTW.

您应该使用patchValue方法来更改值:

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

Answer 3

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

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

Answer 4

所述disablingFormControlprevents它存在于，在成形saving。您可以将其设置为readonly属性。

你可以通过这种方式实现它：

HTML :

<select formArrayName="value" [readonly] = "disableSelect">

TS :

this.disbaleSelect = true;

详情在这里

Answer 5

this.form.enable()
this.form.disable()

或表单控制“第一”

this.form.get('first').enable()
this.form.get('first').disable()

您可以在初始设置上设置禁用或启用。

 first: new FormControl({disabled: true}, Validators.required)

Answer 6

在具有反应形式的DOM中使用禁用是一种不好的做法。FormControl当您从中初始化时，可以在中设置此选项

username: new FormControl(
  {
    value: this.modelUser.Email,
    disabled: true
  },
  [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ]
);

财产value是没有必要的

或者您可以使用get('control_name')并设置表单控件disable

this.userForm.get('username').disable();

Answer 7

如果你想禁用first（formcontrol），那么你可以使用下面的语句。

this.form.first.disable();

Answer 8

在 FormControl 中提供disabledtrue 属性肯定会禁用输入字段。

this.form=this.fb.group({
  FirstName:[{value:'first name', disabled:true}],
  LastValue:['last name,[Validators.required]]
})

上面的示例将禁用FirstName输入字段。

但是，当您尝试通过这样的表单访问禁用的字段值时，真正的问题就会出现， console.log(this.form.value.FirstName);并且它显示为undefined而不是打印字段的实际值。因此，要访问禁用字段的值，必须getRawValue()使用Reactive Forms. 即console.log(this.form.getRawValue().FirstName);会打印表单字段的实际值而不是未定义的。

Answer 9

如果使用disabled表单输入元素（如正确答案中建议的 如何禁用输入），它们的验证也将被禁用，请注意这一点！

（如果您在提交按钮上使用[disabled]="!form.valid"它，它将从验证中排除您的字段）

Answer 10

一种更通用的方法是。

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
    });
}