Disable the entire form at once (Angular reactive form)

Question

Is there any way to disable the entire form in angular when using Reactive forms. I know it is possible to make them disable one by one.

 this.tempForm = this.fb.group({
  m26_type:  '',
  m26_name:  ''
 })
this.tempForm.get('m26_type').disable();

Is it possible to disable the whole form rather than make every controller disable separately?

Borodino

Have a look at AbstractControl.disable – Doggy

Answer 1

this.tempForm.disable();

Disables the control. This means the control will be exempt from validation checks and excluded from the aggregate value of any parent. Its status is DISABLED.

If the control has children, all children will be disabled to maintain the model.

LINK

UPDATE

Plunker link - https://plnkr.co/edit/CFC4uKpvfE4otJ2PWdkc?p=preview

Linhliniment

@Freak001 updated the code with a plunker link check that – Linhliniment

@Freak001 jope it helped ? – Linhliniment

Yeah it helped. In my case problem was I am using custom form controls in reactive forms. When using custom form controls i reactive forms need to implement setDisabledState(). angular.io/api/forms/ControlValueAccessor – Borodino

Remember for template driven forms the code is ngFormName.form.disable() or enable(). Also they are functions as the properties 'disabled' and 'enabled' are read-only. – Slambang

Answer 2

If you use the template driven (with ngModel) you can add to your code also

<form #myForm="ngForm">
//at ts
//create view child
@viewChild('myForm')form:any;
//and in your function of reset
this.form.disable()

Marylouisemaryly