时间戳

首页 > 解决方案 > 以角度反应形式比较 formGroup 中的跨字段验证

angular - 以角度反应形式比较 formGroup 中的跨字段验证

问题描述

我正在尝试创建一个包含字段 password 和 confirmPassword 的注册表单，我使用了角度反应表单，并且我使用了 @rxweb 包的验证我使用了跨字段 formGroup 我使用了来自 RxwebValidators 的比较验证

这是我的 component.ts 代码：

export class RegisterComponent implements OnInit {
  form: FormGroup;
  password = new FormControl("", [RxwebValidators.required()]);
  ConfirmPassword = new FormControl("", [RxwebValidators.compare({fieldName:'password '});

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      "password": this.password,
      "ConfirmPassword ": this.ConfirmPassword 
    });
  }

我没有得到解决方案如何进一步解决这个问题

标签： angularangular-reactive-formsangular-validation

解决方案

我认为您的代码中存在一些语法问题，以下代码就像一个魅力

  form:FormGroup;

   constructor(private fb:FormBuilder){}

   ngOnInit(){
     this.form = this.fb.group({
        password : ['', RxwebValidators.required()],
        confirmPassword: ['', RxwebValidators.compare({fieldName:'password'})]
     });
   }

和圣殿

<form id="passwordInputForm" [formGroup]="form">
  <label for="password" >password:</label><input id="password" type="password" formControlName="password">
  <br/>
  <label for="confirmPassword" >confirm password:</label><input id="confirmPassword" type="password" formControlName="confirmPassword">
  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>

推荐阅读