Question

我有这种反应性角形结构

myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;

ngOnInit(): void {
    this.createFormControls();
        this.createForm();

  }

createFormControls() { 

this.FIRST_NAME = new FormControl('',[Validators.required]);
this.LAST_NAME = new FormControl('',[Validators.required]);

}

createForm(): void
{
    this.myForm = this.fb.group({
                      Personal:this.fb.group({
                            FIRST_NAME:this.FIRST_NAME,
                            LAST_NAME:this.LAST_NAME,
                        })
                 })
}

如果我这样做

this.FIRST_NAME.disable

它禁用FormControl

如何禁用Personal FormGroup中的所有FormControl

Answer 1

如果要禁用该组，则需要告诉this.Personal是什么，现在您已将其声明为FormGroup，而不是其他任何内容。

所以你可以在构建表单后

this.Personal = this.myForm.get('Personal')

然后你可以用以下方法禁用它：

this.Personal.disable();

DEMO：http://plnkr.co/edit/QAhY6A9950jqrgzvjVKu?p=preview

Answer 2

你可以禁用这样的控制。所以你的表单构建器应该像

 createForm(): void
    {
        this.myForm = this.fb.group({
                          Personal:this.fb.group({
                                FIRST_NAME:{value:this.FIRST_NAME,, disabled: true},
                                LAST_NAME:this.LAST_NAME,
                            })
                     })
    }

然后如果你想要禁用/启用。使用以下方法

 this.myForm.get('Personal.FIRST_NAME').disable();
 this.myForm.get('Personal.FIRST_NAME').enable();

Answer 3

一个简单的解决方案：

<fieldset [disabled]="!frmCheckout.get('id').value">
    ... All controls inside will apply disabled rules ...
</fieldset>

Answer 4

给出以下形式：

this.myForm = this.fb.group({
  personal: this.fb.group({
    firstName: null,
    lastName: null
  })
});

A）如果要以编程方式启用/禁用personal表单组，如已经接受的答案所说，可以使用group.disable() / group.enable() 。但是，我想提到options参数的重要性：

this.myForm.get('personal').disable({ emitEvent: false });
this.myForm.get('personal').enable({ emitEvent: false });

选项参数{ emitEvent: false }是可选的。有时您可能希望表单发出事件，但有时却不希望。
如果您要在myForm.valueChanges.subscribe()中的已禁用/已启用之间进行切换，则很有必要，因为有时您需要基于其他控件的值/状态以完全相同的形式来启用/禁用不同的控件/组。没有{ emitEvent: false }，将导致无限循环。

B）如果要在初始化时将其禁用，则需要将其所有控件初始化为禁用。将从头开始禁用以下表单组：

this.myForm = this.fb.group({
  personal: this.fb.group({
    firstName: [ { value: null, disabled: true }, Validators.required ],
    lastName: [ { value: null, disabled: true }, Validators.required ],
    email: [ { value: null, disabled: true }, [ Validators.required, Validators.email ] ],
    birthDate: { value: null, disabled: true }
  })
});

console.log(this.myForm.get('personal').disabled); // This will output "true"

我还添加了验证器作为示例，以防万一有人想知道：当控件被禁用时，我们不必担心验证器，验证将被忽略。

Answer 5

您可以像这样禁用所有表单控件：

    Object.keys(this.form.controls).forEach(ctrl => {
      this.editForm.controls[ctrl].disable();
    });

Answer 6

您可以停用整个表单 $('#project_desc').keyup(function(e){ var value = $('#project_desc').val(); var length = value.trim().replace(/[\s]+/g, " ").length; if(length >=500) { //show an error message ans stop entering values } });

或者您可以枚举所有表单控件并逐个禁用/启用它们

this.Personal.disable();

如何禁用FormGroup中的所有FormControls

6 个答案: