Learn how to create a custom validator to check whether passwords match.

<h1>password match</h1>
<form novalidate autocomplete="off" [formGroup]="signupForm">
<div class="form-field">
<label>Password:</label>
<input type="text" formControlName="password" [(ngModel)]="signup.password" name="password">
</div>
<div class="form-field">
<label>Confirm Password: </label>
<input type="text" formControlName="confirm" [(ngModel)]="signup.confirm" name="confrim"></div>
</form>
    this.signupForm = fb.group({
password: [
'',
Validators.required
],
confirm: [
'',
[
Validators.required,
confirmPasswords.bind(undefined, this.signup)
]
]
});

confirmPasword validator is just a function, also a curry function. So it means it will be invoked when we pass the value 'confirm' password field.

So if we want to send extra params, we can use '.bind(undefined, extraParam)'.

bind to undefined context, will keep the context when it get invoked, then send a extraParam.

The extraParam will be 'passwords' and the value later be passed in is 'confirm'.

confirmPassword.ts:

export function confirmPasswords(passwords, confirm) {
const valid = passwords.password&& passwords.password === confirm.value;
return valid ? null : {
confirmPassword: {
valid: false,
message: "Two passwrods are not the same"
}
};
}

[Angular2 Form] Check password match的更多相关文章

  1. C#实现的Check Password和锁定输错密码锁定账户

    C#实现的Check Password,并根据输错密码的次数分情况锁定账户:如果输入错误3次,登录账户锁定5分钟并提示X点X分后重试登录.如果5分钟后再次输入,累计输入错误密码累计达到5次.则账户会被 ...

  2. ux.form.field.Password 密码与非密码状态切换

    效果如图: 扩展源码: //扩展 //密码按钮扩展 //支持在密码与非密码之间切换 Ext.define('ux.form.field.Password', { extend: 'Ext.form.f ...

  3. [Angular2 Form] Create custom form component using Control Value Accessor

    //switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, ...

  4. [Angular2 Form] Nested formGroup, and usage of formGroupName

    We can nest formGorup: this.reactiveForm = fb.group({ username: [ '', [ Validators.required, Validat ...

  5. [Angular2 Form] Create Radio Buttons for Angular 2 Forms

    Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels ...

  6. [Angular2 Form] Use RxJS Streams with Angular 2 Forms

    Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of t ...

  7. [Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched

    Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the inp ...

  8. [Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup

    The ngModelGroup directive allows you to group together related inputs so that you structure the obj ...

  9. [Angular2 Form] Create and Submit an Angular 2 Form using ngForm

    Forms in Angular 2 are essentially wrappers around inputs that group the input values together into ...

随机推荐

  1. Ansible学习记录一:Linux下部署

    0.Ansible介绍 Ansible 是一个简单的自动化运维管理工具,可以用来自动化部署应用.配置.编排 task(持续交付.无宕机更新等),采用 paramiko 协议库(fabric 也使用这个 ...

  2. D. Dreamoon and Sets(Codeforces Round #272)

    D. Dreamoon and Sets time limit per test 1 second memory limit per test 256 megabytes input standard ...

  3. ThreadLocal使用演示样例

    MainActivity例如以下: package cc.cv; import android.os.Bundle; import android.app.Activity; /** * Demo描写 ...

  4. cocos2d-x 3.0 Loading界面实现

    这个世界每一天都在验证我们的渺小,但我们却在努力创造,不断的在这生活的画卷中留下自己的脚印.或许等到我们老去的那一天,老得不能动仅仅能靠回顾的那一天.你躺在轮椅上,不断的回顾过去.相思的痛苦忘不了,相 ...

  5. Visual Studio Code配置GoLang开发环境

    Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...

  6. BZOJ2119: 股市的预测(后缀数组)

    Description 墨墨的妈妈热爱炒股,她要求墨墨为她编写一个软件,预测某只股票未来的走势.股票折线图是研究股票的必备工 具,它通过一张时间与股票的价位的函数图像清晰地展示了股票的走势情况.经过长 ...

  7. restcontroller和controller区别

    http://www.cnblogs.com/softidea/p/5884772.html#undefined http://blog.csdn.net/blueheart20/article/de ...

  8. Arch Linux下配置Samba

    本文记录笔者配置Samba的过程,供用于自用. sudo pacman -S samba sudo vim /etc/samba/smb.conf 添加以下内容 [global]    dns pro ...

  9. tomcat的一些简单配置

    一.管理tomcatusernamepassword conf文件夹下,tomcat-users.xml <span style="font-size:24px;">& ...

  10. <%%>创建内联代码块(表达式)

    其实<%%>很早之前就见过了,只是会用一点功能,其它的不甚了解.今天偶尔见到了它的庐山真面目,现在共享给大家. 语法 代码块呈现(<%%>)定义了当呈现页时执行的内联代码或内联 ...