Пользовательская проверка для реактивных форм, Валидаторы для двух вложенных входов,

Question

У меня есть два поля ввода, дата начала и дата окончания, когда введенные данные, оба значения не должны быть одинаковыми, мне нужен валидатор для этого

, тогда есть кнопка добавления, которая при clicked добавляет еще два поля ввода, эти две даты начала и окончания не должны совпадать с вышеуказанными полями ввода дней Как и в примере на фотографии, навык и опыт - это моя звездная дата и дата окончания соответственно

У меня есть сложность написания пользовательского подтверждения для него.

https://stackblitz.com/edit/angular-u8dxok?file=src%2Fapp%2Fapp.component.html

Answer 1

Я приведу здесь одну реализацию.

https://stackblitz.com/edit/angular-hm7967

И вставьте сюда код в любом случае.

Шаблон

<code><div>

<form [formGroup]="formGroup">
<label for="fieldOne" id="fieldOne">Field One: </label>
<input type="text" formControlName="fieldOne"/><br/>
<label for="fieldTwo">Field Two: </label>
<input type="text" id="fieldTwo" formControlName="fieldTwo" />

</form>

<pre>
  {{formGroup.valid}}

Компонент

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

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

  public formGroup: FormGroup;

  constructor(){
    this.formGroup = new FormGroup({
      fieldOne: new FormControl('', [Validators.required]),
      fieldTwo: new FormControl('', [Validators.required]),
    }, [
      this.customValidation
    ]);
  }

  private customValidation(form: FormGroup){
    console.log(form);
    const fieldOne : AbstractControl = form.get('fieldOne');
    const fieldTwo : AbstractControl = form.get('fieldTwo');
    if (fieldOne.value === fieldTwo.value) {
        return {
          customValidation: true
        }
    }
    return null;
  }

}