Angular 6 FormGroup.disable() 方法不适用于我的模板驱动的 NgForm [英] Angular 6 FormGroup.disable() method is not working with my template driven NgForm

问题描述

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

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 不是函数

TypeError: this.personForm.disable is not a function

虽然该方法是

我的代码在这里:

// ... 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来显示问题

I have created a stackblitz to show the issue

这里是该演示的链接

更新2:由于初始加载时未显示错误，如果您删除 this.firstStepForm.disable(); &重写它，你会得到错误，但无论如何行为不正确，表单字段没有按预期禁用

UPDATE 2: As the error is not shown on initial loading, if you remove the this.firstStepForm.disable(); & rewrite it , you will get the error, but anyway the behavior is not correct, the form field is not disabled as expected

另外，刷新stackblitz中的浏览器部分会显示一个错误的snackbar

Also, refreshing the browser part in the stackblitz will show an error snackbar

推荐答案

我已经找到了这个错误的原因:

I have discovered the reason for this error:

这个表单是使用ngForm在html模板中制作的，然后我使用ViewChild在打字稿文件中获取表单，我注意到我制作了FormGroup 类型的对象，但 ngForm 与 FormGroup 不同(在我的用例中不清楚)这就是为什么 FormGroup 禁用方法不适用于 ngForm

This form is made in the html template using ngForm, then I used ViewChild to get hold of the form in the typescript file, I noticed that I made that object of type FormGroup but ngForm is different than FormGroup (in my use cases it wasn't clear) that is why the FormGroup disable method is not working on the ngForm

注意:

(VS 代码建议它作为我对该变量的类型是 FormGroup，这会误导编辑器给我这个建议)

(VS code is suggesting it as my type for that variable is FormGroup which is misleading the editor to give me that suggestion)

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

Thanks for everyone who tried to help.

更新:

如果有人不愿意像我一样依赖detectChanges()&基于 Amit 的优秀回答，我们可以在此 AfterContentChecked 中禁用 NgForm 以避免使用 detectChanges()

In case someone is reluctant to depend on detectChanges() like me & Building upon the excellent Answer of Amit , we can disable the NgForm in this AfterContentChecked to avoid using 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 演示

这篇关于Angular 6 FormGroup.disable() 方法不适用于我的模板驱动的 NgForm的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！