比较 angular 反应形式中 formGroup 中的跨字段验证

Question

我正在尝试创建一个包含字段 password 和 confirmPassword 的注册表单，我使用了 angular 反应式表单并且我使用了 @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 
    });
  }

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

Answer 1

我认为您的代码中存在一些语法问题，以下代码非常有效

  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>

比较 angular 反应形式中 formGroup 中的跨字段验证

Compare cross field validation in formGroup in angular reactive forms

angular-validation

angular

angular-reactive-forms