如何在使用FormBuilder创建时禁用完整的表单组？

Question

I'm building a Fromgroup with the FormBuilder.

Example:

  formName = this.fb.group({
    inputName: ['default value', Validators.required],
    // many other items
  });

(Example from: https://stackblitz.com/edit/form-reactive-formbuilder )

Now based on a condition, I want this form to be disabled when loading the vie. Currently I'm using

if([Condition]) {
   formName.disable();
}

However this are three extra lines of code an I want to pass the disable argument when creating the form group, like it can be done with FormControls. Can this be done?

Answer 1

Forms created via FormsBuilder require you to use the disable() method in order to have it disabled.

Personally, in these scenariouses, I wrap the form with a container div and use an additional property that marks that the form is being loaded (or that we haven't finished yet). Then, I use the property in an *ngIf to physically remove the whole form and display a spinner o something similar.

Alternatively, I use the property to control the CSS that disables the container div in a more clever way. The CSS depends on your context.