Question

我只是通过一些基本验证来创建注册表格

我的代码：

registration.html

<form #registrationForm="ngForm" (ngSubmit)="onFormSubmit()">
    ...

    <div class="form-group">
        <label for="reg_password">Pawword</label>
        <input required type="password" class="form-control" id="reg_password" name="reg_password" [(ngModel)]="register_inputs.password"
         #passwordControl="ngModel">

        <ng-container *ngIf="passwordControl.invalid && passwordControl.touched">
            <p class="error-message" *ngIf="passwordControl.errors?.required">
                Password is required!
            </p>
        </ng-container>
    </div>

    <div class="form-group">
        <label for="reg_r_password">Retype Password</label>
        <input required type="password" class="form-control" id="reg_r_password" name="reg_r_password" [(ngModel)]="register_inputs.r_password"
         #rPasswordControl="ngModel">

        <ng-container *ngIf="rPasswordControl.invalid && rPasswordControl.touched">
            <p class="error-message" *ngIf="rPasswordControl.errors?.required">
                Password confirmation is required!
            </p>
            <p class="error-message" *ngIf="(passwordControl.value != rPasswordControl.value) && !rPasswordControl.errors?.required">
                Password does not match the confirm password.
            </p>
        </ng-container>

    </div>

    ...

    <div class="row">
        <div class="col-md-12 text-center align-self-center">
            <button [disabled]="registrationForm.invalid" type="submit" class="btn btn-danger">Submit</button>
        </div>
    </div>

</form>

除匹配的密码验证外，所有验证均有效。

我做错了吗？

任何建议都值得赞赏。

Answer 1

您可以删除第二个验证条件。

<p class="error-message" *ngIf="(passwordControl.value != rPasswordControl.value) && !rPasswordControl.errors?.required">
                Password does not match the confirm password.
            </p>

将其更改为

<p class="error-message" *ngIf="passwordControl.value != rPasswordControl.value">
                Password does not match the confirm password.
            </p>

在“提交”按钮上，您应该添加一个条件，因为匹配密码不是核心验证。即；

<div class="col-md-12 text-center align-self-center">
            <button [disabled]="passwordControl.value == rPasswordControl.value && registrationForm.invalid" type="submit" class="btn btn-danger">Submit</button>
        </div>

Answer 2

I dont know exactly how to archieve it with template driven forms but with reactive forms have this solution:

this.form = this.fb.group({
      name:                   ['', Validators.required ],
      password: this.fb.group({
        pw1:           ['', Validators.required ],
        pw2:          ['', Validators.required ],
      }, {validator: this.matchValidator}),
    })

  private matchValidator(g: FormGroup) {
    return g.get('pw1').value == g.get('pw2').value
    ? null : {'mismatch': true};
  }

More on reactive forms on here: angular.io

Answer 3

您可以使用此npm软件包，该软件包为模板驱动的表单字段提供此确切功能

https://www.npmjs.com/package/ng-validate-equal

安装和使用

步骤1：

安装ng-validate-equal软件包

 npm i ng-validate-equal

步骤2：

在module.ts中导入“ ValidateEqualModule”，并将其添加到NgModule导入的数组中

import { ValidateEqualModule } from 'ng-validate-equal';

@NgModule({
  declarations: [],
  imports: [
    ValidateEqualModule
  ],
  providers: [],
})

步骤3：

确保在<form> </form>标记中包围字段及其确认/重新输入字段
给您的主字段起一个名字
在辅助字段上使用指令并将主字段的名称传递给指令
在确认字段错误数组中查找“ notEqual”错误

<!-- form -->
<form>

<!-- password -->
<label>
  Password
</label>

<input type="password" name="passwordFieldName" placeholder="Password" #modelPassword="ngModel" [(ngModel)]="model.password">

<!-- confirm Password -->
<label>
  Confirm Password
</label>

<input type="password" ngValidateEqual="passwordFieldName" #modelConfirmPassword="ngModel" [(ngModel)]="model.confirmPassword" placeholder="Confirm Password">

<div *ngIf="(modelConfirmPassword.dirty || modelConfirmPassword.touched) && modelConfirmPassword.invalid">
    <p class="warning-text" *ngIf="modelConfirmPassword.hasError('notEqual') && modelPassword.valid">
      Passwords Don't Match
    </p>
</div>

</form>

Angular：表单验证-匹配的密码不起作用

3 个答案:

安装和使用

步骤1：

步骤2：

步骤3：