typescript - Betinget implementere validering i skjema felt av et Angular 2 reaktivt skjema

Kan jeg betinget implementere validering i Angular 2 reaktive skjemaer. Jeg har dette reaktive skjemaet med 3 formControl-felt, ett er et utvalg og de to andre er inndatafelt for fornavn og etternavn. Jeg vil betinget implementere validering for fornavn og etternavn basert på utvalget i det første feltet som er 'validateBy'. Hvis brukeren velger 'byFirstName', skal kun fornavn valideres. Hvis brukeren velger 'byLastName', skal kun etternavn valideres. Hvis brukeren velger 'byBoth', skal både fornavn og etternavn valideres. Jeg har laget en plunker for dette. Kun validering byBoth fungerer.

ngOnInit() {
this.myForm = this._fb.group({
  validateBy: ['byFirstName'],
  firstName:  ['', isFirstNameValid(() => (this.validateBy === 'byFirstName' || this.validateBy === 'byBoth'),
                     Validators.required)],
  lastName: ['', isLastNameValid(() => (this.validateBy === 'byLastName' || this.validateBy === 'byBoth'),
                     Validators.required)],
});

https://plnkr.co/edit/X0zOGf?p=preview

Svar #1

Problemet er at koden din evaluerer uttrykket bare én gang - når FormGroup opprettes. Du må gjøre det dynamisk ved å lage din egen tilpassede validator som vil evaluere uttrykket hver gang den blir kalt:

this.personForm= this.fb.group({
  firstName: ['', Validators.required];
  lastName:  [
    '', 
    conditionalValidator(
      (() => this.isValidationForLastName === true),
      Validators.required
    )
  ]
});

function conditionalValidator(condition: (() => boolean), validator: ValidatorFn): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    if (! condition()) {
      return null;
    }
    return validator(control);
  }
}

Svar #2

En annen måte å gjøre det på ville være noe sånt som dette. Ser ut til å fungere på plunker

  ngOnInit() {
    this.myForm = this._fb.group({
      validateBy: ['byFirstName'],
      firstName:  [''],
      lastName: [''],
    });

    this.myForm.get('validateBy').valueChanges.subscribe(
        (validateBy : string) => {
          if (validateBy === 'byFirstName' || validateBy === 'byBoth') {
            this.myForm.get('firstName').setValidators([Validators.required]);
            this.myForm.get('firstName').updateValueAndValidity();
          }
          if (validateBy === 'byLastName' || validateBy == 'byBoth') {
            this.myForm.get('lastName').setValidators([Validators.required]);
            this.myForm.get('lastName').updateValueAndValidity();
          }

        };
      )
  }

Relaterte artikler