Проверка угловой формы: сравните два поля в разных группах форм - PullRequest
Новая
       47

Проверка угловой формы: сравните два поля в разных группах форм

0 голосов
/ 22 ноября 2018

Извините, если это дубликат чьего-то вопроса.Я не нашел решения для моей проблемы.

Кто-нибудь может объяснить или привести пример, как сравнить два поля в одной форме, но в разных группах форм?

Вот фрагмент кода, чтобы увидетькак выглядят моя форма и валидатор: 

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;
    };
}

1 Ответ

0 голосов
/ 22 ноября 2018

matchValidator будет называться Angular, а не вами.Таким образом, у него не будет доступа к this компонента.

Так что вам придется привязаться к нему.

Вы можете использовать метод get для FormGroup, чтобы получить значение group1 field: (<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 для вашей ссылки.

...