angular 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"

您使用的是响应式表单方法，在这种情况下，要将表单映射到模板上，将表单映射到组件上，您可以在模板中的 form 标记上使用 [formGroup] .

#registrationForm="ngForm"一般用于建筑形式的Template Drive策略。然后在 (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' 属性或条件放在输入字段上进行验证。此外，如果您需要查看简单的表单验证示例，请检查以下 repo： https://github.com/alokstar/Angular4FormValidation

希望对您有所帮助！

angular 2 表单验证无法使用散列表单元素

angular 2 form validation not working using hash form element

angular

angular2-forms

angular2-services