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

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

TypeError:this.personForm.disable不是函数

尽管该方法是&它甚至是由VS代码建议的，就像在这个快照中一样

我的代码在这里：

// ... 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：

我创建了一个stackblitz来展示这个问题

更新2： 由于初始加载时未显示错误，如果删除

this.firstStepForm.disable（）&重写它，您将得到错误，但无论如何行为都不正确，表单字段未按预期禁用

此外，刷新stackblitz中的浏览器部分将显示一个错误snackbar
使用模板驱动方法创建的表单对象的类型为
NgForm
，而不是
FormGroup

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

所以你应该做什么

this.personForm.form.disable()

编辑：

您必须在查看检查后将代码移动到
生命周期钩子事件，因为您的
formGroup
不会准备就绪
ngAfterViewChecked（）
被触发

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

并使用ChangeDetectorRef延迟更改检测以避免表达式更改错误

我已发现此错误的原因：

这个表单是使用ngForm在html模板中创建的，然后我使用ViewChild在typescript文件中获取表单，我注意到我创建了FormGroup类型的对象，但ngForm与FormGroup不同（在我的用例中，它不清楚）这就是为什么表单组禁用方法在ngForm上不起作用的原因

注:

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

谢谢所有试图帮助的人

更新：

以防有人不愿意依赖像我这样的侦探
&基于Amit的优秀答案，我们可以在AfterContentChecked中禁用NgForm，以避免使用detectChanges（）

检查if条件的具体位置？在NgOnInit中？@monogate是的，它被选中了。您可以尝试在NgOnInit中实现AfterViewInit并将您的代码放入NgoAfterViewInit中吗？我会尝试这个，我还检查了FormGroup是否是由console.log创建的&它是在调用之前创建的（请检查问题中的代码，我已经更新了它），如果我把disable（）放在ngAfterViewInit中，我仍然会遇到同样的错误谢谢你的回答，实际上它是一个FormGroup，你可以在我的代码中看到它的类型，你在这里使用的是被动FormGroup，我的是模板驱动的FormGroup。我添加了stackblitz示例以更好地显示问题，但我没有看到您提到的stackblitz中有任何错误。是的，当然，奇怪的是，它没有给出错误，但仍然没有禁用表单，我已经在本地进行了测试&在stackblitz中，将您的代码移动到
AfterViewChecked
lifecycle hook，并推迟更改检测以避免表达式更改错误。非常好的解决方案，感谢您非常有用的帮助，我有点害怕这些挂钩，因为它们看起来有点太多了，但很有效，谢谢
  // 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();
  }