Angular 2 Validator Gewohnheit, die

Question

auf eine andere Form Kontrolle hängt

Ich versuche, einen benutzerdefinierten Validator für meine Formcontrol mealType

Wenn mein Formcontrol category einen Wert hat, zu machen und mealType nicht, sollte mealType ungültig.

Wenn category keinen Wert hat, sollte mealType gültig sein.

Ich erhalte eine Konsole Fehler:

TypeError: Cannot read property 'get' of undefined

Code:

ngOnInit() { 
    this.findForm = this.formBuilder.group({ 
     categories: [null, Validators.required], 
     mealTypes: [null, this.validateMealType], 
     distanceNumber: null, 
     distanceUnit: 'kilometers', 
     keywords: null, 
    }); 
} 

validateMealType() { 
    if (this.findForm.get('categories').value) { 
     if (this.findForm.get('mealTypes').value) { 
      var mealTypeError = false; 
     } else { 
      var mealTypeError = true; 
     } 
    } else { 
     var mealTypeError = false; 
    } 

    return mealTypeError ? null : { 
     error: true 
    } 
} 

Es ist meine Form, die nicht definiert ist.

Wie kann ich das beheben?

Der Versuch, dies:

validateMealType(categoryControl: FormControl, mealTypeControl: FormControl) { 
    if (categoryControl.value) { 
     if (!mealTypeControl.value) { 
      var mealTypeError = true; 
     } else { 
      var mealTypeError = false; 
     } 
    } else { 
     var mealTypeError = false; 
    } 

    return mealTypeError ? null : { 
     error: true 
    } 
} 

aber es verursacht:

Error in app/find-page/subcomponents/find-page/find-form.component.html:36:5 caused by: Cannot read property 'value' of undefined

dies versucht:

class MealTypeValidator { 

    constructor(private categoryFormControl: FormControl) { } 

    mealTypeValidator(control: FormControl): { [error: string]: any } { 
     if (this.categoryFormControl.value) { 
      if (!control.value) { 
       return { error: true }; 
      } 
     } 
    } 
} 

dann in meiner Form Komponente:

ngOnInit() { 
    this.findForm = this.formBuilder.group({ 
     categories: [null, Validators.required], 
     mealTypes: [null, new MealTypeValidator(this.findForm.get('categories').mealTypeValidator()], 
     distanceNumber: null, 
     distanceUnit: 'kilometers', 
     keywords: null, 
    }); 
} 

aber ich habe Kompilierungsfehler. Wie bekomme ich das richtig? Ich denke, dass ich sowohl in der Validierungsklasse, die ich gemacht habe, als auch in der Verwendung davon ein bisschen abwesend bin.

Answer 1

Sie sind einen Schritt näher.

Sie benötigen eine benutzerdefinierte Validator zum FormGroup statt befestigen, weil es zwei wissen muss FormControl (categories und mealTypes), das Anbringen so zu FormGroup wird der Validator breiter Ansicht und Zugriff auf den gesamten FormControl

geben

ngOnInit() { 
    this.findForm = new FormGroup({ 
     mealTypes : new FormControl(null, Validators.Required), 
     categories : new FormControl(null) 
     // others form control here 
    }, validateMealType); // <-- see here is your custom function 
} 

auf obigen Code um das zu erreichen, Ihre ngOnInit zu

ändern, müssen Sie tatsächlich FormGroup Konstruktor verwenden, statt FormBuilder, so dass Sie kann Ihre benutzerdefinierte Validierung in den Parametern anhängen. Verschieben Sie Ihren benutzerdefinierten Prüfer auch außerhalb der Komponentenklasse.

Werfen Sie einen Blick auf diese Plunker, um mehr Einblick für Ihren speziellen Fall hier zu erhalten.

Answer 2

Die Lösung von @ Michael vorgeschlagen, für mich mit einer geringfügigen Änderung der Winkel 4.

In der Validierungsfunktion gearbeitet, ich brauchte den Parametertyp von AbstractControl zu ändern, um FormGroup weil die AbstractControl in dieser Version nicht der Fall ist enthält die Steuerelementsammlung.

function validateEqual(form: FormGroup): { [key: string]: boolean } { 
    const senha = form.controls['novaSenha']; 
    const confirmacaoSenha = form.controls['confirmacaoNovaSenha']; 

    if (senha != undefined && confirmacaoSenha != undefined) { 
    const senhaValue = senha.value; 
    const confirmacaoSenhaValue = confirmacaoSenha.value; 

    if (senhaValue !== confirmacaoSenhaValue) { 
     return { 'A senha e a confirmação não coincidem.': true}; 
    } 

    return null; 
    } 
} 

Danke auch @Ariel, der diesen Beitrag gründet.