角2表单验证无法使用哈希表单元素

Question

我有一个使用angular 2的表单验证。[仅适用于Angular 2]如何使用以下方式启动验证部分？

app.component.html：

<form   #registrationForm="ngForm"  (ngSubmit)="submitform()">
  <input type="text" class="form-control" name="name" formControlName="name" />
</form>

app.component.ts：

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder,FormGroup,Validators } from '@angular/forms';

export class AppComponent implements OnInit {
  ngForm: FormGroup;
  ngOnInit() {
    this.ngForm = this._fb.group({
      name: ['Select', Validators.required]
    });
  }
  submitform() {
    this.formSubmitted = true;
    if (!this.ngForm.valid) {
      alert("Form Not valid");
    } else {
      alert("Valid");
    }
  }
}

上面的脚本不起作用..我在哪里弄错了？

Answer 1

您的模板有问题。 代替使用#registrationForm="ngForm"使用[formGroup]="ngForm"

您使用的是反应式表单方法，在这种情况下，要在模板上映射表单，在Component上映射表单，请在模板的form标记上使用[formGroup] 。

#registrationForm="ngForm"通常用于构建表单的模板驱动器策略中。 然后，在(submit)您还将表单传递给在这种情况下并不需要的方法。

另外，您应该使用(submit)而不是(ngSubmit)

尝试这个：

<form [formGroup]="ngForm" (submit)="submitform()">
  <input type="text" class="form-control" name="name" formControlName="name" />
  <button>Submit</button>
</form>

这是供您参考的示例StackBlitz 。

Answer 2

您要验证什么？ 只有一个输入字段，如果要验证，请尝试在输入字段上放置“ required”属性或条件以进行验证。 另外，如果您需要看一下简单的表单验证示例，请检查以下存储库： https : //github.com/alokstar/Angular4FormValidation

希望能帮助到你！