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

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

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

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


当前回答

最好的解决方案是:

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

解决方案大纲(如果断开链接):

(1)创建指令

import { NgControl } from '@angular/forms';

@Directive({selector: '[disableControl]'})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {}
}

像这样使用它

<input [formControl]="formControl" [disableControl]="condition">

(3)由于禁用的输入不显示在表单中。值提交时,您可能需要使用以下代替(如果需要):

onSubmit(form) {
  const formValue = form.getRawValue() // gets form.value including disabled controls
  console.log(formValue)
}

其他回答

注意

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

例如

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

在响应式表单的DOM中使用disable是不好的做法。 当初始化from时,你可以在FormControl中设置这个选项

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

不需要属性值

或者你可以使用get('control_name')来获取表单控件并设置为禁用

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

使响应式形式angular 2+的字段禁用和启用

1.禁用

添加[attr。Disabled]="true"输入。

<input class=“form-control” name=“Firstname” formControlName=“firstname” [attr.disabled]=“true”>

要启用

export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}

启用整个表单

this.formname.enable ();

单独启用特定字段

this.formname.controls.firstname.enable ();

same for disable, replace enable() with disable().

这很好。查询的注释。

在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);将打印表单字段的实际值,而不是未定义。

这招对我很管用: this.form.get(“第一次”)。禁用({onlySelf:真});