Angular ionic4表单中的密码和确认密码匹配验证

我已经在ionic4中创建了一个注册表单，其中包含诸如名字、姓氏、电子邮件、密码和确认密码等字段

我还添加了验证，比如如果用户离开或触摸相应的字段，则显示字段是必需的

我想为密码和确认密码添加验证。i、 e如果密码与确认密码不匹配错误

下面是我的代码：

html文件：

<ion-content>

  <div style="margin: 30px">
    <ion-title class="ion-text-center">Register</ion-title>

    <form [formGroup]="loginForm">
      <ion-item>
        <ion-label position="floating">First Name*</ion-label>
        <ion-input formControlName="fname" type="text"></ion-input>
      </ion-item>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.fname">
          <div class="error-message" *ngIf="loginForm.get('fname').hasError(error.type) && (loginForm.get('fname').dirty || loginForm.get('fname').touched)">
            {{ error.message }}
          </div>
        </ng-container>

      </div>
      <ion-item>
        <ion-label position="floating">Last Name*</ion-label>
        <ion-input formControlName="lname" type="text"></ion-input>
      </ion-item>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.lname">
          <div class="error-message" *ngIf="loginForm.get('lname').hasError(error.type) && (loginForm.get('lname').dirty || loginForm.get('lname').touched)">
            {{ error.message }}
          </div>
        </ng-container>

      </div>
      <ion-item>
        <ion-label position="floating">Email Id*</ion-label>
        <ion-input formControlName="email" type="text"></ion-input>
      </ion-item>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.email">
          <div class="error-message" *ngIf="loginForm.get('email').hasError(error.type) && 
        (loginForm.get('email').dirty || loginForm.get('email').touched)">
            {{ error.message }}
          </div>
        </ng-container>

      </div>

      <ion-item>
        <ion-label position="floating">Password*</ion-label>
        <ion-input formControlName="password" type="password"></ion-input>
      </ion-item>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.password">
          <div class="error-message" *ngIf="loginForm.get('password').hasError(error.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">
            {{ error.message }}
          </div>
        </ng-container>

      </div>
      <ion-item>
        <ion-label position="floating">Confirm Password*</ion-label>
        <ion-input formControlName="confirmpassword" type="password"></ion-input>
      </ion-item>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.confirmpassword">
          <div class="error-message" *ngIf="loginForm.get('confirmpassword').hasError(error.type) && (loginForm.get('confirmpassword').dirty || loginForm.get('confirmpassword').touched)">
            {{ error.message }}
          </div>
        </ng-container>

      </div>
      <br>
      <div>
        <ion-button [disabled]="!loginForm.valid" expand="full">Signup</ion-button>
      </div>

    </form>

  </div>

</ion-content>

---

请帮助我如何为密码添加验证，如果输入的密码不匹配，请确认密码。

只需创建一个接受

表单组的验证程序，如果这两个字段不匹配，则返回一个错误

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loginForm: FormGroup;

  error_messages = { ... }

  constructor(
    public formBuilder: FormBuilder
  ) {
    this.loginForm = this.formBuilder.group({
      fname: new FormControl('', Validators.compose([
        Validators.required
      ])),
      ...
      confirmpassword: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(30)
      ])),
    }, { 
      validators: this.password.bind(this)
    });
  }

  ngOnInit() {
  }

  password(formGroup: FormGroup) {
    const { value: password } = formGroup.get('password');
    const { value: confirmPassword } = formGroup.get('confirmpassword');
    return password === confirmPassword ? null : { passwordNotMatch: true };
  }

}

更新：
在模板中：

<div class="container">

  <div style="margin: 30px">
    <h1 class="ion-text-center">Register</h1>

    <form [formGroup]="loginForm">
      <div class="form-group">
        <label>First Name*</label>
        <input class="form-control" formControlName="fname" type="text" />
      </div>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.fname">
          <div class="error-message" *ngIf="loginForm.get('fname').hasError(error.type) && (loginForm.get('fname').dirty || loginForm.get('fname').touched)">
            {{ error.message }}
          </div>
        </ng-container>
      </div>

      ...

      <div class="form-group">
        <label>Confirm Password*</label>
        <input class="form-control" formControlName="confirmpassword" type="password" />
      </div>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.confirmpassword">
          <div class="error-message" *ngIf="loginForm.get('confirmpassword').hasError(error.type) && (loginForm.get('confirmpassword').dirty || loginForm.get('confirmpassword').touched)">
            {{ error.message }}
          </div>
        </ng-container>
        <div class="error-message" *ngIf="!loginForm.get('confirmpassword').errors && loginForm.hasError('passwordNotMatch') && (loginForm.get('confirmpassword').dirty || loginForm.get('confirmpassword').touched)">
          Password and Confirm Password fields should match
        </div>
      </div>

      <button class="form-control btn btn-primary" [disabled]="!loginForm.valid">Signup</button>
    </form>
  </div>
</div>


登记
名字*
{{error.message}}
...
确认密码*
{{error.message}}
密码和确认密码字段应匹配
报名


这是给你的裁判的一封信

@SiddAjmera，非常感谢您的回答，但是在stackblitz示例中，您给出了它在表单本身中显示“Form Error-null”，并在输入密码后获得错误消息。我只想在输入密码字段后显示密码不匹配错误。请帮我接电话this@Saif，我已经更新了答案和stackblitz示例。请检查这是否有帮助。非常感谢@SiddAjmeera，它现在非常有效。嗨@SiddAjmeera，很抱歉再次打扰您。如果我想再添加两个需要confim验证的字段，如Mobile no.和Confirm Mobile no.如何添加到现有代码中。我试着为手机多创建一个表单组，但它不起作用。请在这方面帮助我，谢谢。我建议你问一个单独的问题，这样我们可以保持这篇文章的重点。顺便说一句，您应该能够使用答案中演示的相同方法来实现这一点。在我们创建的自定义验证器中，只需添加联系人号码的验证，并确认联系人号码。如果你还在挣扎，请继续问另一个问题。
<div class="container">

  <div style="margin: 30px">
    <h1 class="ion-text-center">Register</h1>

    <form [formGroup]="loginForm">
      <div class="form-group">
        <label>First Name*</label>
        <input class="form-control" formControlName="fname" type="text" />
      </div>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.fname">
          <div class="error-message" *ngIf="loginForm.get('fname').hasError(error.type) && (loginForm.get('fname').dirty || loginForm.get('fname').touched)">
            {{ error.message }}
          </div>
        </ng-container>
      </div>

      ...

      <div class="form-group">
        <label>Confirm Password*</label>
        <input class="form-control" formControlName="confirmpassword" type="password" />
      </div>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.confirmpassword">
          <div class="error-message" *ngIf="loginForm.get('confirmpassword').hasError(error.type) && (loginForm.get('confirmpassword').dirty || loginForm.get('confirmpassword').touched)">
            {{ error.message }}
          </div>
        </ng-container>
        <div class="error-message" *ngIf="!loginForm.get('confirmpassword').errors && loginForm.hasError('passwordNotMatch') && (loginForm.get('confirmpassword').dirty || loginForm.get('confirmpassword').touched)">
          Password and Confirm Password fields should match
        </div>
      </div>

      <button class="form-control btn btn-primary" [disabled]="!loginForm.valid">Signup</button>
    </form>
  </div>
</div>