如何確認密碼

Question

大家好，我已經為我的組件 login.component.ts 控制 forms，我想對 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();
  }


}

登錄組件.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 中，您需要放置驗證器：

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