Angular：强制验证模板驱动的表单答案

【问题标题】：Angular: force validate template driven formAngular：强制验证模板驱动的表单
【发布时间】：2020-12-20 21:37:49
【问题描述】：

我有一个这样的模板驱动表单：

<form #docForm="ngForm">
...
<input type="text"
       required
       [attr.name]="name"
       [(ngModel)]="value" />
</form>

然后我有一个按钮应该检查表单是否有效，即使所有表单的字段都未被触及。单击按钮时，应验证并突出显示所有无效表单的字段。所以我的组件代码如下所示：

@ViewChild(NgForm, {static: false}) form: NgForm;
...
someButtonHandler() {

     // this.form.controls collection is always empty! 

     for (const fieldName in this.form.controls) { 
         ... do something with form controls 
     }
  }

我走对了吗？为什么 this.form.controls 集合总是空的？

可能有一些更正确的方法来解决我的问题？

【问题讨论】：

您好，抱歉，我不确定您为什么要使用模板驱动的表单，反应式表单不是更好吗？（我对模板不太熟悉，所以我真的很好奇你的推理:)）另外我认为这有点难以调试，你有没有机会在@987654321 中创建一个包含你的代码的新角度项目@ 并分享它？如果你这样做，我很想玩，看看我能不能想出办法:)

标签： angular

【解决方案1】：

如果你希望你的表单在someButtonHandler，你可以在调用函数时传递它，在你的html中：someButtonHandler(docForm)。

或者，如果您使用 viewchild 在组件中链接它，您也可以访问它：

@ViewChild('docForm') courseForm: NgForm;

someButtonHandler() {

     for (const fieldName in this.courseForm.form.controls) { 
         ... do something with form controls 
     }
}

【讨论】：

【解决方案2】：

您可以将模型类与模板驱动的表单一起使用，这将在按钮单击时验证表单。

例如：

import { Component } from '@angular/core';

export class User {
  public name: string;
  public email: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  model = new User();

  constructor() { }

  onSubmit(form) {
    console.log(form.value)
  }
}

<div class="container">
  <h4>Template-driven Form</h4>

  <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">

    <div *ngIf="model.isName" class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" [(ngModel)]="model.name" name="name" #name="ngModel"
        [ngClass]="{ 'is-invalid': userForm.submitted && name.invalid }" required>
      <div class="invalid-feedback" *ngIf="userForm.submitted && name.invalid">
        <p *ngIf="name.errors.required">Name is required</p>
      </div>
    </div>

    <div class="form-group">
      <label>Email</label>
      <input type="email" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel"
        [ngClass]="{ 'is-invalid': userForm.submitted && email.invalid }" email required>
      <div *ngIf="userForm.submitted && email.invalid" class="invalid-feedback">
        <div *ngIf="email.errors.required">Email is required</div>
        <div *ngIf="email.errors.email">Must be a valid email address</div>
      </div>
    </div>

    <div class="form-group">
      {{userForm.valid}}
      <button class="btn btn-danger btn-block">Submit</button>
    </div>
  </form>
</div>

【讨论】：