Winkel-2 Benutzerdefinierte validator-das hängt davon ab, auf einem anderen Formular-Steuerelement

Ich versuche zu machen, einen benutzerdefinierten validator für meine FormControl mealType

Wenn mein FormControl category einen Wert hat und mealType nicht, mealType unwirksam sein.

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

Ich bin immer in der Konsole error:

TypeError: Cannot read property 'get' 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 ist nicht definiert.

Wie kann ich dies beheben?

Versuchen, diese:

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 bewirkt:

Fehler in
app/find-Seite/Unterkomponenten/finden-Seite/suchen-Formular.Komponente.html:36:5
verursacht durch: Cannot read property 'Wert' undefined

versuchen, diese:

class MealTypeValidator {

    constructor(private categoryFormControl: FormControl) { }

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

dann in meinem 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 diese Rechte? Ich glaube, ich bin gerade ein bisschen auf beiden deaktiviert die Validierung der Klasse I gemacht und die Nutzung von it.

InformationsquelleAutor BeniaminoBaggins | 2016-11-12
  1. 10

    Sind Sie einen Schritt näher.

    Müssen Sie Ihre benutzerdefinierten Prüfung zu den FormGroup statt, da braucht es zu wissen, zwei FormControl (categories und mealTypes), so dass das anbringen an FormGroup geben wird, der validator mehr überblick und Zugriff auf die gesamte FormControl

    Um das zu erreichen, ändern Sie Ihre ngOnInit zu

    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
}

    Oben genannten code, die Sie tatsächlich verwenden FormGroup - Konstruktor anstelle des FormBuilder, so können Sie fügen Sie Ihre benutzerdefinierte Validierung der Parameter. Auch, bewegen Sie Ihre benutzerdefinierten validator außerhalb der component-Klasse.

    Werfen Sie einen Blick auf diese Plunker, um mehr Einblicke für Ihren konkreten Fall hier.

    • Ist es möglich, mehrere formgroup Prüfungen? Was ist, wenn ich will, ein weiterer validator außer nur "validateMealType" das hängt davon ab, mehrere Steuerelemente.
    • FormGroup Konstruktor kann eine einzelne ValidatorFn (wie oben), ein array des gleichen oder eines AbstractControlOptions Objekt, das benannt hat Eigenschaften, die mit der vorherigen Erwähnung validator-Funktion oder ein array von Funktionen, wie: {validators: validateMealType}
    InformationsquelleAutor Michael
  2. 3

    Dem Vorschlag von @Michael bei mir funktioniert mit einer kleinen änderung für die Winkel 4.

    In der Validierungs-Funktion, die ich brauchte, um den parameter zu ändern Art von AbstractControl zu FormGroup, weil die AbstractControl in dieser version nicht enthalten, die die controls-Auflistung.

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

    Dank auch, @Ariel, wer gründet diese post.

    • Statt form.Steuerelemente['control_name'] Sie können.get('control_name'), aber wenn Sie eingeben, welche input type es sieht sauberer aus.
    InformationsquelleAutor Maicon Heck
Schreibe einen Kommentar