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"

您使用的是反应式表单方法，通过将模板上的表单与组件上的表单映射到模板，您可以在模板中[formGroup]标记上使用form。 / p>

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

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

尝试一下：

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

这是您推荐的Sample StackBlitz。

Answer 2

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

希望有帮助！

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

2 个答案: