以反应形式禁用输入字段

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

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

或formcontrol“第一个”

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

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

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

Answer 3

在具有被动形式的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 4

更通用的方法是。

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

Answer 5

disabling FormControl prevents在saving时以表格形式显示。您可以将其设置为readonly属性。

Answer 6

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

Answer 7

在 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 而不是打印字段的实际值。因此，要访问 disabled 字段的值，必须使用 getRawValue() 提供的 Reactive Forms 方法。即 console.log(this.form.getRawValue().FirstName); 将打印表单字段的实际值而不是未定义的值。

Answer 8

如果使用disabled形式的输入元素（如正确答案中建议的那样） how to disable input）的验证也将被禁用，请注意！

（如果您使用的是[disabled]="!form.valid"之类的提交按钮，则会将您的字段从验证中排除）

Answer 9

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

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

Answer 10

我遇到了同样的问题，但是调用this.form.controls ['name']。disable（）并没有解决它，因为我正在重新加载我的视图（使用router.navigate（））。

就我而言，我必须在重新加载之前重置表单：

this.form =未定义； this.router.navigate（[path]）;

Answer 11

如果要禁用first（formcontrol），则可以使用以下语句。

this.form.first.disable();

Answer 12

setTimeout(() => { emailGroup.disable(); });

Answer 13

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

AWS_ID = AKIAW6LZAWQJYVSFY6MV

Answer 14

您可以使用this.form.controls['name'].disable();

Answer 15

您可以声明一个函数来启用/禁用所有表单控件：

  toggleDisableFormControl(value: Boolean, exclude = []) {
    const state = value ? 'disable' : 'enable';
    Object.keys(this.profileForm.controls).forEach((controlName) => {
      if (!exclude.includes(controlName))
        this.profileForm.controls[controlName][state]();
    });
  }

并像这样使用它

this.toggleDisableFormControl(true, ['email']);
// disbale all field but email

Answer 16

在制作 ReactiveForm 时：[在 FormControl 中定义禁用的属性]

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

html：

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

Answer 17

您可以通过添加一个 css 类并将其与 angular 绑定来轻松完成。

.disable{
    pointer-events: none;
}

    <div [ngClass]="{'disable': //condition goes here">
     <input type="text" formControlName="test">
     </div>

** .禁用{ 指针事件：无； }**

Answer 18

要使字段禁用和启用为反应形式角度为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().

这很好。评论查询。