Question

我试图在没有两种方式的数据绑定的情况下在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);
  }
}

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

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

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

因此，只需使用ngModel，您就可以使用了。

如何在没有模型驱动方法的情况下验证模板驱动形式？

2 个答案: