如何确认密码

Question

大家好，我有组件 login.component.ts 的控制表单，我想对 register.component.ts 进行相同的控制，但是如何控制密码和确认密码？这是我的 login.component.ts:

import {FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {


  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      Email: new FormControl('', [
        Validators.required,
        Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
      ]),
      Password: new FormControl('', [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(20)
      ])
    });
  }

  onSubmit() {
    console.log(this.form);
  }

  onReset() {
    this.form.reset();
  }


}

login.component.ts


  <div class="row" >
    <div class="col-md-6 col-md-offset-3">
      <form [formGroup]="form" (validSubmit)="onSubmit()">
        <div class="form-group">
          <label class="control-label">Email</label>
          <input type="text" class="form-control" formControlName="Email">
        </div>
        <div class="form-group">
          <label class="control-label">Password</label>
          <input type="password" class="form-control" formControlName="Password">
        </div>

        <button type="submit" class="btn btn-success" style="width: 100%;">Submit</button> <br><br>
        <button type="submit" class="btn btn-danger" style="width: 100%;">Forget password</button>

      </form>
    </div>


  </div>

***现在我只想在 register.component.ts 中为我的密码确认添加一个控件，我该怎么做？ ***

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  constructor() { }
  register(f){
console.log(f.value)
  }


  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      User: new FormControl('',
      [Validators.required]),

      Email: new FormControl('', [
        Validators.required,
        Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
      ]),
      Password: new FormControl('', [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(20)
      ]),
      Confirm: new FormControl('', [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(20) ])
    });
  }

  onSubmit() {
    console.log(this.form);
  }

  onReset() {
    this.form.reset();
  }



}

Answer 1

Takwa，你可以自定义验证器来做你想做的事，喜欢它：

    static validatorConfirmedPassword(fieldName: string): ValidatorFn {
        return (control: AbstractControl) => {
            if (!control.value) return null;

            return control.value == control.root.get(fieldName).value ? null : { someError: true };
        }
    }

并在 FormControl 中确认您需要放置验证器：

 Confirm: new FormControl('', [
        Validators.required,
        Validators.minLength(8),
        this.validatorConfirmedPassword("Password"),
        Validators.maxLength(20) ])

如何确认密码

How can I Confirm Password

passwords

typescript

angular

angular-reactive-forms