禁用响应式输入字段

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

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

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

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

当前回答

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

2019-11-01 06:07:03

其他回答

在FormControl中将disabled属性设置为true肯定会禁用输入字段。

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

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

但是当您试图通过这样的表单访问禁用的字段值时，真正的问题就出现了 console.log (this.form.value.FirstName);它显示为undefined而不是打印field的实际值。因此，要访问禁用字段的值，必须使用响应式表单提供的getRawValue()方法。即console.log (this.form.getRawValue () .FirstName);将打印表单字段的实际值，而不是未定义。

2021-02-17 15:04:19

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

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

2021-06-10 01:19:14

我试图从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),
    ])

2021-10-21 06:53:29

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

this.form.first.disable ();

2017-04-05 12:24:31

角度 14+

field = new FormControl<any>()

readonly formGroup = new FormGroup<any>({
    field2: new FormControl<any>(),
});

选项1

 ngOnInit() {
    # ...
    this.field.setDisable();
    this.field.setEnable();
    this.formGroup.controls.field2.setEnable();
    this.formGroup.controls.field2.setDisabled();
    # ...
}

选项2

private setFieldEnabled() {
    this.field.setEnable()
  }

private setFieldDisabled() {
    this.field.setDisable()
  }

private setField2Enabled() {
    this.formGroup.controls.breakdown.setEnable();
  }

private setField2Disabled() {
    this.formGroup.controls.breakdown.setDisable();
  } 

setEnableOrDisableFields(truth: boolean): void {
    if (truth) {
        this.setFieldEnabled()
        this.setField2Enabled();
        return
    }
    this.setFieldDisabled()
    this.setField2Disabled();
}

2022-10-24 06:36:48

禁用响应式输入字段

推荐文章

最新文章

标签