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

【问题标题】：angular 2 form validation not working using hash form element角度 2 表单验证无法使用哈希表单元素
【发布时间】：2019-03-17 20:49:30
【问题描述】：

我有一个使用 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");
    }
  }
}

上面的脚本不工作..我哪里做错了？

【问题讨论】：

您期待什么？我认为应该是(submit) 而不是(ngSubmit)
为什么在使用 [Reactive Forms](#registrationForm="ngForm") 时使用 #registrationForm="ngForm"。你也应该避免打电话给你的FormGroupngForm。

标签： angular angular2-forms angular2-services

【解决方案1】：

您的模板存在问题。而不是使用#registrationForm="ngForm" 使用[formGroup]="ngForm"

您正在使用响应式表单方法，其中，要将表单映射到模板上，将表单映射到组件上，您可以在模板中的 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>

这里有一个Sample StackBlitz 供您参考。

【讨论】：

请这样使用：
我在等你的答复
@SEERANSV, <form #registrationForm="ngForm" (ngSubmit)="submitform()"> 一般用于模板驱动表单。由于您使用的是响应式表单，并且您已经拥有表单的 JavaScript 表示，因此在您的组件类中，您实际上不需要执行 <form #registrationForm="ngForm" (ngSubmit)="submitform()">
非常感谢你
@SiddAjmera 你能回答这个问题吗？如何获取json数据并显示？stackblitz.com/edit/…

【解决方案2】：

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

希望对你有帮助！

【讨论】：

这些问题一般都发布在 cmets 中，而不是作为答案。