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

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

#1楼 票数:0 已采纳

您的模板有问题。 代替使用#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

#2楼 票数:0

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

希望能帮助到你!

  ask by SRANSV translate from so

未解决问题?本站智能推荐:

2回复

从angular2中的表单验证器方法访问类变量

我正在尝试使用自定义验证来构建模式驱动的表单。 我想验证用户插入的密码是否符合要求(大写字母,小写字母和数字)。 问题是我不想特别在方法中编写正则表达式,我想拥有一个不可避免的服务来集中我的所有正则表达式。 我能够将服务注入组件类,但不能以任何方式访问validateetor方法内的服务实
1回复

如何在Angular2中为模型驱动的表单编写自定义验证器指令?

我是Angular2的新手 我花了很多篇文章为模型驱动表单编写自定义验证器指令 但是我理解不正确吗? 有什么好理解的吗? 我想要指令中的电子邮件,passord,cpassrod验证。 以及如何在形式中使用指令 请帮我
2回复

从后端初始化表单值

我有以下服务来获取数据。 我正在按预期获得数据 用户模型 BasicComponent.ts 我希望预先填充这些值。 但是user对象显示undefined 。 这是最小的代码。 我有其他组件,如BasicComponent ,每个组件都有forms 。 我已经包含了所有依
1回复

Angular2:表单中的诊断属性是什么

我不理解angular2网站的这一段: 我们在最后输入了一个诊断属性,以返回我们模型的JSON表示。 它将帮助我们了解我们在开发过程中所做的工作; 我们给自己留了一张清理笔记,以便以后丢弃。 链接在这里 这是什么意思
1回复

异步验证-无法从角度2中的自定义验证访问服务

我正在尝试创建一个异步自定义验证器来检查表单中是否已存在EmployeeId。 为此我创建了一个自定义验证器并实现了一个服务来调用web api。 当我试图搜索EmployeeId时,我得到一个错误,说无法读取未定义的属性“服务” 任何人有想法如何做到这一点.. 自定义验证器
3回复

如何在Angular2中获取表单数据

我的 angular 2 项目中有一个表单。 我知道如何从 API 中检索数据。 但不知道如何在那里执行 CRUD 操作。 任何人都可以帮助我使用有关如何将 JSON 格式的表单数据发送到 PHP/任何其他语言的 Web 服务的简单代码...
1回复

在angular2中渲染编辑表单。我如何等待服务中的数据?

我尝试使用服务中的数据呈现表单进行编辑,因为我的initForm()方法在从服务获取数据之前调用,因此出现错误。 我该如何解决? 我的组件 我的服务 还有我的表格 我收到了一个错误 TypeError: Cannot read property "name" of undef
1回复

无法使用angular2在JSON文件中存储用户输入数据

联系服务.tsimport { Injectable } from "@angular/core";import { Http, Response, Headers, RequestOptions } from "@angular/http";import { Observable } from "