【问题标题】:how to do confirm password validation?如何确认密码验证?
【发布时间】:2020-09-28 05:28:31
【问题描述】:

我有一个注册组件,我在其中创建了表单 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 呢?因为表单生成器有很多解决方案,但表单组没有解决方案

【问题讨论】:

标签: javascript html angular


【解决方案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 }     
    }



【讨论】:

    猜你喜欢
    • 2013-09-18
    • 2015-04-03
    • 2023-02-23
    • 2011-08-23
    • 2017-12-06
    • 2021-07-24
    • 2011-06-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多