Angular 6 FormGroup.disable() method is not working with my template driven NgForm

Question

When I try to use the disable method on a formGroup in my Angular 6 app , I get this error in the browser console :

TypeError: this.personForm.disable

Answer 1

The form object that you have created using template driven approach is of type NgForm and not FormGroup

There is a form attribute inside ngForm object which is actually of type FormGroup.

So you should be doing

this.personForm.form.disable()

EDIT :

You have to move your code to AfterViewChecked life cycle hook event, since your formGroup wont be ready ngAfterViewChecked() is triggered.

ngAfterViewChecked() {
      console.log(this.personForm.form);    
      this.personForm.form.disable(); 
      this.cdr.detectChanges();  
} 

And also postpone the change detection to avoid expression changed error using ChangeDetectorRef.

DEMO