实施“确认密码”记在angular2

Question

熊说我'退出新Angular2。

我'目前工作的一个应用程序，并偶然发现了一个小问题。我试图为我的注册做一个“确认密码”。

使用MEAN与Angular2我' - 用户注册和登录实例教程& （link）

我还没有被玩弄多少的基本代码。所以我的出发点和你在网站上看到的一样。

我想这样做只是复制/粘贴现有​​的密码（HTML代码），改造成一个“确认密码”（HTML代码）。因此，html的工作原理 - 你可以再次输入你的密码。但是没有比较功能。而且我不知道在哪里或者怎样做。

我试图找到其中的“密码”功能，并发现一些类似于它在login.component.ts和register.component.ts但我无法弄清楚如何实现我的目标..

任何建议，指南或/和技巧非常感谢！

Answer 1

您可以通过使用无表单和验证在角容易归档此，这里是验证同一密码注册组件的简单例子。

注意：您可以了解更多关于无功形式本文档中https://angular.io/docs/ts/latest/guide/reactive-forms.html

首先，我们需要导入活性形式模块到我们的应用程序：

@NgModule({ 
    imports: [ BrowserModule, ReactiveFormsModule ], // <- this module 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

，并创建新的组件：

@Component({ 
    selector: 'tpc-register', 
    template: ` 
    <form [formGroup]="form" novalidate (ngSubmit)="onSubmit()"> 
     <div> 
     <label> 
      Username:<br> 
      <input formControlName="username" type="text"> 
     </label> 
     </div> 
     <div formGroupName="passGroup"> 
     <label> 
      Password:<br> 
      <input formControlName="password" type="password" 
      [class.form-error]="form.get('passGroup').errors?.invalid" 
      > 
     </label> 
     </div> 
     <div formGroupName="passGroup"> 
     <label> 
      Confirm Password:<br> 
      <input formControlName="confirmPassword" type="password" 
      [class.form-error]="form.get('passGroup').errors?.invalid" 
      > 
     </label> 
     </div> 
     <button [disabled]="form.invalid">Register</button> 
    </form> 
    <pre>Form value: {{ form.value | json }}</pre> 
    <pre>Form valid: {{ form.valid }}</pre> 
    `, 
    styles: [ 
    ` 
    .form-error { 
    border-color: red 
    } 
    ` 
    ] 
}) 
export class TpcRegister implements OnInit { 
    form: FormGroup; 
    constructor(private fb: FormBuilder) {} 

    ngOnInit() { 
    // create new Form by FormBuilder 
    this.form = this.fb.group({ 
     username: ['', /* Validation */[Validators.required]], 
     // for password and confirm password 
     passGroup: this.fb.group({ 
     password: ['', /* Validation */[Validators.required]], 
     confirmPassword: ['', /* Validation */[Validators.required]], 
     }, /* Custom Validation */ { 
     validator: comparePassword 
     }) 
    }) 
    } 

    onSubmit() { 
    if (this.form.valid) { 
     const formValue = Object.assign({}, this.form.value) 
     formValue.password = formValue.passGroup.password 
     delete formValue.passGroup 

     // do stuff to register user with formValue 
     console.log(formValue) 
    } 
    } 
} 

请看看到ngOnInit方法，神奇的东西在这里发生。

我们创建passGroup并为此组应用自定义验证程序，在这种情况下为comparePassword。

export function comparePassword(group: FormGroup) { 
    const pass = group.value; 
    return (pass.password === pass.confirmPassword) ? null /* It's good */ : { 
    invalid: true 
    } 
} 

上述功能将FormGroup类型的group，那么我们就可以比较password和confirmPassword值。

如果他们是一样的，所以在这里没有什么错误，我们返回null，否则我们会返回一个对象，告诉我们的应用程序该组有错误。

您可以现场演示这里打球：https://plnkr.co/edit/Vk0G7DaPB1hRK9f1UVEX?p=preview

Answer 2

您可以使用下面的包：https://github.com/yuyang041060120/ng2-validation

然后你必须定义你的密码和确认密码控制的可能性：

let password = new FormControl('', Validators.required); 
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password)); 

this.form = new FormGroup({ 
    password: password, 
    certainPassword: certainPassword 
}); 

并显示错误，如果有任何：

<form [formGroup]="form"> 
    <input type="password" formControlName="password"/> 
    <p *ngIf="form.controls.password.errors?.required">required error</p> 
    <input type="password" formControlName="certainPassword"/> 
    <p *ngIf="form.controls.certainPassword.errors?.notEqualTo">notEqualTo error</p> 
</form>