角度表单验证:比较不同表单组中的两个字段 [英] Angular form validation: compare two fields in different form groups

问题描述

很抱歉，如果它与某人的问题重复.我没有找到解决问题的方法.

I'm sorry if it's a duplicate of someone question. I didn't find a solution for my problem.

有人可以解释或举一个例子，说明如何比较一种形式但不同形式组中的两个字段吗?

Can anybody explain or give an example how to compare two fields in one form but in different form groups?

下面是代码段，以查看我的表单和验证器的外观:

Here is code snippet to see how my form and validator are look like:

private createForm() {

    const testGroups = {
        groupOne: this.fb.group({
            fieldOne: this.fb.control(null)
        }),
        groupsTwo: this.fb.group({
            fieldTwo: this.fb.control(null, [this.matchValidator])
        })
    };

    this.testForm = this.fb.group(testGroups);
}

 matchValidator(from: FormControl): ValidatorFn {
    return (to: AbstractControl): { [key: string]: any } => {
        return from.value && to.value && from.value === to.value
            ? { fieldMatch: true }
            : null;
    };
}

推荐答案

matchValidator 将由Angular而不是您调用.因此，它将无法访问组件的 this .

matchValidator will be called by Angular and not by you. So it won't have the access to the Component's this.

所以您必须绑定到它.

您可以在 FormGroup 上使用 get 方法来获取 group1 的 field 的值:(< FormGroup> this.mainForm.get('group1')).get('field').value

You can use the get method on a FormGroup to get the group1's field's value: (<FormGroup>this.mainForm.get('group1')).get('field').value

尝试一下:

组件类:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, ValidatorFn, AbstractControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mainForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.mainForm = this.fb.group({
      group1: this.fb.group({
        field: []
      }),
      group2: this.fb.group({
        field: [null, [this.matchValidator.bind(this)]]
      })
    });

  }

  matchValidator(control: AbstractControl): { [key: string]: boolean } | null {
    const fromValue = control.value;
    if(this.mainForm) {
      const toValue = (<FormGroup>this.mainForm.get('group1')).get('field').value;
      if (fromValue && toValue && fromValue === toValue) {
        console.log('Control: ', control);
        return { 'fieldMatch' : true };
      }
      console.log('Control: ', control);
      return null;
    }
  }

  get group2Field() {
    return (<FormGroup>this.mainForm.get('group2')).get('field');
  }
}

模板:

<form [formGroup]="mainForm">
  <div formGroupName="group1">
    <label for="">Group 1 Field</label>
    <input type="text" formControlName="field">
  </div>
  <hr>
  <div formGroupName="group2">
    <label for="">Group 2 Field</label>
    <input type="text" formControlName="field">
    <p *ngIf="group2Field?.errors?.fieldMatch">These fields match</p>
  </div>
</form>

这是一个 样本StackBlitz 供您参考.

Here's a Sample StackBlitz for your ref.

这篇关于角度表单验证:比较不同表单组中的两个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！