[Angular2 Form] Validation message for Reactive form

  <div class="form-field">
    <label>Confirm Password: </label>
    <input type="text" formControlName="confirm" [(ngModel)]="signup.confirm" name="confrim">
    <div *ngIf="!signupForm.valid">
      <span *ngIf="signupForm.get(‘confirm‘).hasError(‘confirmPassword‘) && signupForm.get(‘confirm‘).touched">
        {{signupForm.get(‘confirm‘).errors?.confirmPassword.message}}
      </span>
      <span *ngIf="signupForm.get(‘confirm‘).hasError(‘required‘) && signupForm.get(‘confirm‘).dirty">This field is requred</span>
    </div>
  </div>

‘signupForm‘ is a formGroup.

we can use ‘hasError‘ & ‘get()‘ methods to write the code.

Refer to: Article && Doc

时间： 2024-11-13 20:21:43

[Angular2 Form] Validation message for Reactive form的相关文章

angular reactive form

这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-upload-component-with-express/ 原文:https://malcoded.com/posts/angular-fundamentals-reactive-forms/ ------------------------------------ Forms are arguably o

Jquery组织Form表单提交之Form submission canceled because the form is not connected

有时候导出Excel时需要根据某些条件筛选数据,然后将数据通过NPOI生成Excel并导出.组织数据时可以通过放到一个表单中,某些场景是使用脚本(如:jquery)组织一个form(通过字符串拼接),然后将这个from的转换成jquery对象或者Dom对象,再调用对应的submit方法. 例子如下,有一个html页面 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co

jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields(

<s:form action="login"...与<s:form action = "login.action".的区别

1.<s:form action="login" namespace="/login"> 它表示的是<form id="login" name="login" action="/Action/login/login.action" method="post"> 因为它使用了struts标签,后面会自动加.action,而且namespace会起作用 2.<s

【EBS FORM】进阶3. 在FORM中调用外部功能

来源:http://www.cnblogs.com/chenyongjun/p/3940631.html 1. fun_function.execute fnd_function.execute用于访问指定的基于表单(Form)且可访问的功能(不可访问将抛出错误消息),Oracle建议以此过程替换原内置函数OPEN_FORM.因为fnd_function.execute可以绕开应用安全验证并找到功能正确的访问路径. 可访问说明: 访问的功能需挂在同一职责的相同菜单下,如果被调用的功能不想在菜单下

Form表单插件jquery.form.js

常常使用到这个插件,但是老忘记怎么使用,现在对大家写的进行一定的整合. 使用插件实例: 一般的使用方法  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"><

[Angular2 Form] Reactive Form, show error message for one field

<form [formGroup]="reactiveForm" novalidate autocomplete="off"> <div class="form-field"> <label>Title:</label> <input formControlName="title"> <div class="field-error-message&qu

[Angular2 Form] Reactive Form, FormBuilder

Import module: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MessageComponent } from './message.component'; import messageRoutes from './message.routes'; import {FormsModule, ReactiveFormsModule} f

[Angular2 Form] Angular 2 Template Driven Form Custom Validator

In this tutorial we are going to learn how we can also implement custom form field validation in Angular 2 template driven forms, by creating our own custom validation directive. We are going to see how to write such directive and how its a best prac