Angular 6 FormGroup.disable（）方法不适用于我的模板驱动的NgForm

Question

当我尝试在Angular 6应用程序的formGroup上使用disable方法时，在浏览器控制台中出现此错误：

  

TypeError：this.personForm.disable不是函数

尽管该方法为mentioned in the documentation，并且VS Code甚至在此快照中建议使用该方法。

我的代码在这里：

// ... many parts skipped, the form here is template driven 
// but still personForm is a FormGroup , 
// I am trying to disable the whole FormGroup with all child elements
@ViewChild('personForm') personForm: FormGroup;

        if (true) {
       // if I console.log here the form, I can see it is created already
         console.log(this.personForm);              
// output of console.log is 
// NgForm {submitted: false, _directives: Array(0), ngSubmit: EventEmitter, form: FormGroup}

         this.personForm.disable();
        }

这是什么问题？

更新1：

我创建了一个堆栈闪电来显示问题

here is the link for that demo

更新2： 由于错误不会在初次加载时显示，因此如果删除this.firstStepForm.disable();并将其重写，则会收到错误消息，但是无论如何行为都不正确，因此不会按预期禁用表单字段

此外，刷新stackblitz中的浏览器部分将显示错误的小吃栏

Answer 1

您使用模板驱动的方法创建的表单对象的类型为NgForm，而不是FormGroup

form对象中有一个ngForm属性，该属性实际上是FormGroup类型。

所以你应该做

this.personForm.form.disable()

编辑：

由于您的AfterViewChecked尚未准备好formGroup被触发，因此您必须将代码移至ngAfterViewChecked()生命周期挂钩事件。

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

还要推迟更改检测，以避免使用ChangeDetectorRef更改表达式更改错误。

DEMO

Answer 2

我发现了此错误的原因：

此表单是使用 ngForm 在html模板中创建的，然后我使用ViewChild来保存打字稿文件中的表单，我注意到我做了< em> FormGroup类型的对象，但是ngForm与FormGroup不同（在我的用例中尚不清楚），这就是为什么 FormGroup disable方法在ngForm上不起作用

注意：

（VS代码建议使用该变量，因为我对该变量的类型是FormGroup，这会误导编辑人员给我该建议）

感谢所有尝试提供帮助的人。

更新：

万一有人不愿像我一样依赖detectChanges（） ＆基于Amit的出色答案，我们可以在AfterContentChecked中禁用NgForm，以避免使用detectChanges（）

  // instead of disabling here & using cdr.detectChanges()

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

  // we can put our disable here
  ngAfterContentChecked() {
    this.personForm.form.disable();
  }

Stackblitz demo