时间戳

首页 > 解决方案 > Angular：有没有一种方法可以从 ts 文件访问表单中的所有表单控件，而无需显式地传递表单 html？

angular - Angular：有没有一种方法可以从 ts 文件访问表单中的所有表单控件，而无需显式地传递表单 html？

问题描述

HTML 代码

<form #pharmacyForm="ngForm" name="form" novalidate>
//form controls
         <button (click)="onSubmit(pharmacyForm)">Save</button>
</form>

打字稿代码

onSubmit(pharmacyForm){
    const controls = pharmacyForm.controls;
    for(const name in controls){
      if (controls[name].invalid) {

        controls[name].touched=true;
    }
    }
    if (pharmacyForm.valid) {
      this.save();
   }

  }

现在我的 TypeScript 文件中有多个间接调用 onSubmit 的方法，我不想将 pharmacyForm 作为参数传递给这些方法中的每一个。我只想能够访问表单而不将其作为方法参数传递。就像将表单对象绑定到一个变量然后能够迭代它的控件，我该如何实现这一点？

标签： angulartypescript

解决方案

要获得对您可以使用的表单的引用，@ViewChild 装饰器。

@ViewChild('pharmacyForm') public form: NgForm;

onSubmit() {
 console.log(this.form);
}

推荐阅读