Question

请记住，我已经退出Angular2。

我目前正在开发一款应用，偶然发现了一个小问题。我试图为我的注册制作一个“确认密码”。

我正在使用MEAN Angular2 - 用户注册和登录示例＆amp;教程（link）

我没有玩过很多基本代码。所以我的出发点与您在网站上看到的相同。

我尝试做的只是复制/覆盖现有密码（html代码）并将其重新制作为“确认密码”（html代码）。因此html可以正常工作 - 您可以再次输入密码。但是没有比较功能。我真的不知道在哪里或更确切地说如何制作。

我试图找到“密码”功能的位置，并在login.component.ts和register.component.ts中找到类似于它的东西，但我无法弄清楚如何实现我的目标.. < / p>

任何建议，指南或/和提示都非常感谢！

Answer 1

您可以使用Angular中的Reactive Forms和Validator轻松归档此处，以下是验证相同密码的寄存器组件的简单示例。

注意：您可以在本文档https://angular.io/docs/ts/latest/guide/reactive-forms.html

中了解有关反应表单的更多信息

首先，我们需要将Reactive Forms Module导入我们的应用程序：

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ], // <- this module
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

并创建新的组件：

@Component({
  selector: 'tpc-register',
  template: `
    <form [formGroup]="form" novalidate (ngSubmit)="onSubmit()">
      <div>
        <label>
          Username:<br>
          <input formControlName="username" type="text">
        </label>
      </div>
      <div formGroupName="passGroup">
        <label>
          Password:<br>
          <input formControlName="password" type="password"
            [class.form-error]="form.get('passGroup').errors?.invalid"
          >
        </label>
      </div>
      <div formGroupName="passGroup">
        <label>
          Confirm Password:<br>
          <input formControlName="confirmPassword" type="password"
            [class.form-error]="form.get('passGroup').errors?.invalid"
          >
        </label>
      </div>
      <button [disabled]="form.invalid">Register</button>
    </form>
    <pre>Form value: {{ form.value | json }}</pre>
    <pre>Form valid: {{ form.valid }}</pre>
  `,
  styles: [
  `
  .form-error {
    border-color: red
  }
  `  
  ]
})
export class TpcRegister implements OnInit {
  form: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // create new Form by FormBuilder
    this.form = this.fb.group({
      username: ['', /* Validation */[Validators.required]],
      // for password and confirm password
      passGroup: this.fb.group({
        password: ['', /* Validation */[Validators.required]],
        confirmPassword: ['', /* Validation */[Validators.required]],
      }, /* Custom Validation */ {
        validator: comparePassword
      })
    })
  }

  onSubmit() {
    if (this.form.valid) {
      const formValue = Object.assign({}, this.form.value)
      formValue.password = formValue.passGroup.password
      delete formValue.passGroup

      // do stuff to register user with formValue
      console.log(formValue)
    }
  }
}

请看一下ngOnInit方法，这里发生了神奇的事情。

我们创建passGroup并为该群组应用自定义验证程序，在本例中为comparePassword。

export function comparePassword(group: FormGroup) {
  const pass = group.value;
  return (pass.password === pass.confirmPassword) ? null /* It's good */ : {
    invalid: true
  }
}

上述函数将采用group类型FormGroup，然后我们可以比较password和confirmPassword的值。

如果它们相同，那么这里没有错误，我们返回null，否则我们将返回一个对象来告诉我们的应用程序这个组有错误。

您可以在此处播放实时演示：https://plnkr.co/edit/Vk0G7DaPB1hRK9f1UVEX?p=preview

Answer 2

您可以使用以下套餐：https://github.com/yuyang041060120/ng2-validation

然后您就可以定义密码并确认密码控制：

let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));

this.form = new FormGroup({
  password: password,
  certainPassword: certainPassword
});

如果有任何错误，则显示错误：

<form [formGroup]="form">
  <input type="password" formControlName="password"/>
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword"/>
  <p *ngIf="form.controls.certainPassword.errors?.notEqualTo">notEqualTo error</p>
</form>

在angular2中实现“确认密码”

2 个答案: