Question

我想验证两个表单是否使用Angular 2验证器具有相同的内容。如何从另一个表单的验证器函数中访问一个表单的值？

假设我创建了这样的表单：

let registerForm = formBuilder.group({
    field1: [''],
    field2: ['',  sameThanfield1],
});

sameThanfield1（）是一个包含此代码的验证函数，但它不能工作，因为我无权访问另一个表单的值。我该如何解决这个问题？

sameThanfield1(form: FormControl): any {

   if(form.field1 !== form.field2) {
        return {
            "not the same": true
        };
   }
   return null;
}

Answer 1

我知道您要验证两个字段是否具有相同的值。

您可以访问特定控件的值。我假设您的验证器与表单对象的范围相同。

@Component({
// ...
})
export class ExampleComponent implements OnInit {

    registerForm: any;

    ngOnInit() {
        this.registerForm = formBuilder.group({
            field1: [''],
            field2: ['', this.sameAsField1],
        });
    }

    sameAsField1(control: formControl) {

        if (this.registerForm && control.value === this.registerForm['field1'].value) {
            return {
                "not the same": true
            };
        }

        return null;

    }
}

Answer 2

我找到了另一个解决方案，但没有验证器。它监视 valueChanges Observable 。

@Component({
// ...
})
export class ExampleComponent implements OnInit {

registerForm: any;
passError: boolean = false;

ngOnInit() {
    this.registerForm = this.formBuilder.group({
        field1: [''],
        field2: ['', this.sameAsField1],
    });

    this.registerForm.valueChanges.subscribe(function (){
      if(this.registerForm.value.field1 !== this.registerForm.value.field2) passError = true;
    });

}

}

访问Angular 2中Validator中的另一个表单

2 个答案: