如何確認密碼驗證？

Question

我有一個注冊組件，我在其中創建了表單 articleForm

    export class RegistrationComponent implements OnInit {
    articleForm = new FormGroup({
  password: new FormControl('', [Validators.required]) ,
  confirmPassword: new FormControl ('',[ Validators.required])} ,
this.checkPasswords
);
 checkPasswords(group: FormGroup) { 
    let setPassword = group.get('setPassword').value;
    let confirmPassword = group.get('confirmPassword').value;
    return setPassword === confirmPassword ? null : { notSame: true }     
      }

這是我的 html 文件......

  <tr><td> Password</td><td><input formControlName="password" id="materialFormCardNameEx" class="form-control"type="password">
    <label *ngIf="articleForm.get('password').invalid && processValidation" [ngClass] = "'error'"> <font color="red"> password is required. </font></label>

    <tr><td>confirm Password</td><td><input formControlName="confirmPassword" id="materialFormCardNameEx" class="form-control" type="password">
      <label *ngIf="articleForm.get('confirmPassword').invalid && processValidation" [ngClass] = "'error'"> <font color="red"> password not matching. </font></label>

如何在此進行確認密碼驗證？

如何使用 formgroup 而不是 formbuilder 來做到這一點？ 因為表單生成器有很多解決方案，但表單組沒有

Answer 1

html

 <form  [formGroup]="FormReset" (ngSubmit)="updatePassword()" >

        <div class="uk-margin">
            <div class="uk-inline uk-width-1-1">
                <span class="uk-form-icon" uk-icon="icon: lock"></span>
                <input class="uk-input uk-form-large" type="password" placeholder="Confirm password" name="confirmPassword" formControlName="confirmPassword" required>

            </div>
        </div>

        <div *ngIf="FormReset.get('setPassword').dirty != 0 && FormReset.get('confirmPassword').dirty != 0 " class="alert alert-danger">

                <label class="uk-text-meta uk-text-danger" *ngIf="FormReset.hasError('notSame')"> Password & Confirm Password does not match. </label>  
            </div>

                <button type="submit" [disabled]="!FormReset.valid" class="uk-button uk-button-primary uk-button-large uk-width-1-1 " >
      <form>

ts

    ngOnInit() {

    this.FormReset = this.formBuilder.group({
      setPassword: [null, Validators.compose([
                                          Validators.required, 
                                          Validators.maxLength(30),
                                          Validators.minLength(6)])
                                        ],
      confirmPassword: [null, Validators.compose([
                                        Validators.required, 
                                        Validators.maxLength(30),
                                        Validators.minLength(6)])
                                      ],                                  
    },{validator: this.checkPasswords }
    )}


   checkPasswords(group: FormGroup) { 
  let setPassword = group.get('setPassword').value;
  let confirmPassword = group.get('confirmPassword').value;
  return setPassword === confirmPassword ? null : { notSame: true }     
    }