繁体   English   中英

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

angular 2 form validation not working using hash form element

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

2 个回复

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

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

希望能帮助到你!

1 角2表单元素作为组件-验证无效

我对我的项目http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/实施了此解决方案,基本上,您使用表单元素构建了一个组件并将其放入表单中,我遇到的问题是当我想建立一个验证器来检查字段之间的依赖关系时 以常规模 ...

2 无法验证表单元素

我试图了解如何使用其ID来验证表单元素。 我还做了一个小提琴来检查并尝试处理代码,但是小提琴显示错误。 这是小提琴https://jsfiddle.net/obz3jc30/代码中肯定存在一些错误,因此我无法对其进行验证。 在确定问题时需要帮助 的HTML 脚本 ...

3 基于其他表单元素的表单元素验证

我正在渲染一个表单来向数据库添加一个类(课程)。 该课程有一定的开始时间和结束时间。 两者都是时间字段。 我为该类创建了一个字段集: 在我的Form类中,我只需将此fieldset添加到我的表单中: 两个时间字段的格式是'H:ia',这意味着我将获得类似'11:00am'的 ...

4 使用 jQuery 验证表单元素

我正在尝试制作一个验证页面,当在文本框中输入文本时,我需要停止说“请填写表格”。 我只需要在文本框为空时进行验证 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt; ...

5 如何使用 reactjs 验证我的表单元素?

对于这个简单的问题,我真的很抱歉,但我的大脑现在确实无法正常工作,我该如何通过反应来验证我的输入? 这是我的 index.js 请帮助我创建该验证。 我只需要检查值是否不为空,如果值为空,则将输入边框的颜色更改为红色! ...

6 如何在表单元素外使用验证

如何在不提供表单名称的情况下针对特定输入,div或区域进行角度验证。 我可不可以做 摆脱形式。 而我这样做b / c我可能需要一个我不想附加表单元素和名称的单个输入字段。 ...

7 使用jQuery进行表单验证的所有表单元素的类

我正在进行表单验证,默认情况下禁用提交按钮。 如果所有输入的类别均为“有效”,我想启用提交按钮。 我已经尝试过此代码,但是它不起作用。 另外,如果页面上有多个表单,我如何确保jQuery仅在该表单内部查找有效的类。 具有所有有效类的一种表单不应启用所有表单上的提交按钮。 ...

8 使用表单元素显示表单验证提示

我使用这个java脚本函数来显示表单验证提示。 这个函数与输入元素一起工作正常。我的问题是我需要用其他表单元素修改这个函数,比如textarea,select box,checkbox ...任何人都可以告诉我该怎么做? 这是我一直在使用的功能.. 这是Html 我用te ...

9 使用ParsleyJS验证一个表单元素内的两个表单

我正在构建两个表单,这些表单将位于Kentico网站的单个页面上。 kentico网站被包装在一个单一的表单字段中,因此我无法为页面上的每种表单创建单独的表单元素。 问题是parsleyJS只允许您传递一个表格来初始化它,例如$(“#form”)。parsley();。 我需要验证彼此独立 ...

10 JavaScript验证各种表单元素

我有一个试图验证某些表单元素的脚本,但是我无法为我需要的每个“如果”都弄清楚正确的语法,它绝对不起作用。 我认为问题可能在于,在同一表单上有许多“标签”或其他表单,因此我可能不得不写出元素所属的表单,但我不知道其语法,例如其var NewStatus = document.getElement ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM