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

Question

我正在尝试在没有双向数据绑定的情况下验证Angular中的模板驱动表单。我已经使用[(ngModel)]进行了验证，但当我尝试在没有MODEL的情况下验证表单时，我会得到以下错误

无法读取未定义的属性"invalid">

这是我的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>

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

这是分量CCD_ 2。

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!! :-)nn' + f);
console.log(f);
}
}

Answer 1

只需替换：

f.form.controls.username.invalid

带有

username.invalid

但必须使用ngModel

所以你的HTML控件：

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

Answer 2

它不工作，因为它不应该工作。

正如您所看到的，未与ngModel绑定的输入不属于表单的一部分

所以，只要使用ngModel，你就可以开始了。