如何在没有模型驱动方法的情况下验证模板驱动表单。？答案

【问题标题】：How to validate template driven form without model driven approach.?如何在没有模型驱动方法的情况下验证模板驱动表单。？
【发布时间】：2018-12-17 18:08:27
【问题描述】：

我正在尝试在没有两种方式数据绑定的情况下验证 Angular 中的模板驱动表单。我已经使用[(ngModel)] 完成了验证，但是当我尝试在没有 MODEL 的情况下验证表单时，我收到以下错误

无法读取未定义的“无效”属性

这是我的 HTML 代码。

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <h3>Angular 6 Template-Driven Form Validation</h3>
        <form name="form" (ngSubmit)="onSubmit(f.value)" #f="ngForm" novalidate>
          <div class="form-group">
            <label for="username">Username:</label>
            <input type="text"
                   class="form-control"
                   name="username"
                   #userName
                   required
                   minlength="8"/>
            <div *ngIf="f.form.controls.username.invalid && f.form.controls.username.touched" class="invalid-feedback">
              <div *ngIf="f.form.controls.username.errors.required" class="alert alert-danger">Username is required</div>
              <div *ngIf="f.form.controls.username.minlength" class="alert alert-danger">length should b 8 character</div>
            </div>
          </div>
     <button class="btn btn-primary" >Register</button>
        </form>
      </div>
    </div>
  </div>
</div>

当我点击按钮时，它也不会向组件发送数据。

这是组件TS file。

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

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.component.html',
  styleUrls: ['./template-driven-form.component.css']
})
export class TemplateDrivenFormComponent  {

  // model: any = {};

  onSubmit(f) {
    // alert('SUCCESS!! :-)\n\n' + f);
    console.log(f);
  }
}

【问题讨论】：

将 f.form.controls.username.invalid 替换为 f.controls.username.invalid
@PrashantPimpale 我试过了，但仍然出现同样的错误。
显示ts代码！
你在哪里声明Form？
@PrashantPimpale 检查现在我在我的问题中添加了组件 TS 文件代码。

标签： javascript angular typescript validation

【解决方案1】：

只需替换：

f.form.controls.username.invalid

与

username.invalid

但必须使用ngModel

所以你的 HTML 控件：

<input type="text" ngModel class="form-control" name="username" #username="ngModel" required minlength="8"/>

【讨论】：

仅使用username.invalid 删除f.form.controls.

【解决方案2】：

它不起作用，因为它不应该。

As you can see，未与ngModel 绑定的输入不属于您的表单。

所以只需使用ngModel 就可以了。

【讨论】：