时间戳

首页 > 解决方案 > Angular：强制验证模板驱动的表单

angular - Angular：强制验证模板驱动的表单

问题描述

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

<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集合总是空的？

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

标签： angular

解决方案

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

例如：

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>

推荐阅读