Montag, Juni 1, 2020

Angular2 RC: hinzufügen von Steuerelementen mit addControls Methode nach der Erstellung der ControlGroup nicht funktioniert

Ich habe einen aus, fügt verschiedene Felder (ich bin neue Steuerelemente hinzufügen, da nur das verstecken von die Vorlage mit *ngIf nicht ausschließen, Sie aus der form und daher resultiert in Ungültiger form), basierend auf der ausgewählten option in einem select-option. Ich bin neue Steuerelemente hinzufügen, um die form mit addControl-Methode von einem Formular in Angular2. Die controls werden korrekt Hinzugefügt, aber ich weiß nicht, warum die Werte der hinzugefügten Steuerelemente nicht aktualisiert, wenn der Benutzer die Eingaben. Hier ist der Weg, ich bin das hinzufügen neuer Steuerelemente zum Formular:

signUpForm: ControlGroup;

constructor(private fb: FormBuilder) { }

ngOnInit(): void {
    this.signUpForm = this.fb.group({
        firstName: ["", Validators.required],
        lastName: ["", Validators.required],
        group: ["", Validators.required]
    });
}

modifyControls(selectedGroup): number {
    if (selectedGroup == 1) {
        if (this.signUpForm.contains("studentID")) {
            this.signUpForm.removeControl("studentID");
        }
        this.signUpForm.addControl("teacherCode", new Control("", Validators.required));//need some custome validations
        this.signUpForm.addControl("teacherID", new Control("", Validators.required));
        return 1;
    }
    else if (selectedGroup == 2) {
        if (this.signUpForm.contains("teacherCode")) {
            this.signUpForm.removeControl("teacherCode");
            this.signUpForm.removeControl("teacherID");
        }
        this.signUpForm.addControl("studentID", new Control("", Validators.required));
        return 2;
    }
}

Sieht es aus wie, dass eckig nicht erkannt, die diese neuen Felder. Ich denke, es hat etwas mit AbstractControl aber die Dokumentation fehlt auf, dass. Hier ist der snapshot von dem problem, dass die dynamisch Hinzugefügt werden, sind die Steuerelemente nicht abgeholt eckig.
Angular2 RC: hinzufügen von Steuerelementen mit addControls Methode nach der Erstellung der ControlGroup nicht funktioniert

Zeigen das problem, das ich erstellt haben, ein einfaches Beispiel in den folgenden plunker (gehen Sie bitte auf die version 2 zu replizieren, dieses problem).

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

Was mache ich falsch und wie machen Sie es mit dem aktuellen setup?
Was sind andere Optionen für die Erreichung der das gleiche Verhalten?

Danke für Eure Hilfe

Problemumgehung:

modifyControls(selectedGroup) {
    if (selectedGroup == 1) {
        this.signUpForm.controls['teacherCode'].validator = Validators.required;
        this.signUpForm.controls['teacherCode'].updateValueAndValidity();
        this.signUpForm.controls['teacherID'].validator = Validators.required;
        this.signUpForm.controls['teacherID'].updateValueAndValidity(); 
        this.signUpForm.controls['studentID'].validator = null;
        this.signUpForm.controls['studentID'].updateValueAndValidity();
    }
    else if (selectedGroup == 2) {
        this.signUpForm.controls['teacherCode'].validator = null;
        this.signUpForm.controls['teacherCode'].updateValueAndValidity();
        this.signUpForm.controls['teacherID'].validator = null;
        this.signUpForm.controls['teacherID'].updateValueAndValidity();
        this.signUpForm.controls['studentID'].validator = Validators.required;
        this.signUpForm.controls['studentID'].updateValueAndValidity(); 

    }
}
  • Ich fand einen workaround in meinem Fall durch das hinzufügen von Prüfungen und aktualisieren Sie Sie auf dem Flug, sondern weil ich immer noch nicht den Grund gefunden, dass mein ursprünglicher code hat nicht funktioniert bin ich nicht schließen kann die Frage als gelöst.
InformationsquelleAutor Afi | 2016-05-27

1 Kommentar

  1. 1

    Beispielsweise zu tun, die required Validierung nur, wenn teacherCode.value hat einen Wert:

        this.signUpForm.addControl("teacherCode", new Control("", 
            (c:Control) => { 
              if(this.signUpForm.controls['teacherID'].value) {
                return Validators.required(c);
              }
            })
        );
    
    • Vielen Dank für die Antwort, aber ich bekomme eine Fehlermeldung, dass nicht access controls-Eigenschaft undefined. Ich aktualisiert meine Frage, einen snapshot des Problems.
    • Das funktioniert auch nicht. Ich bekomme TypeError: Cannot read property „Wert“ den Wert „undefined“. Es scheint, es ist nicht geschaffen durch die Zeit, erreicht die Prüfungen.
    • Vielleicht teacherID existiert nicht in dieser Zeit. Ich nicht die Mühe zu untersuchen, was Sie wirklich wollen, zu überprüfen. Besifes, dass ich bin sicher, es wird funktionieren.
    • plnkr.co/Bearbeiten/uG3HW7bmy1Rcay8UuSCu?p=Album Vorhören
    • Danke für die Antwort, aber selbst in deinem Beispiel, sobald ich die (diese.signUpForm.controls.Vorname.Wert) (dies.signUpForm.controls.teacherCode.Wert), die Hinzugefügt worden ist dynamisch, es gibt mir den gleichen Fehler. Ich aussieht, obwohl der name identisch sind die Objekte sind unterschiedlich und eckig kann Sie nicht finden,
    • Hey Gunter, ich habe versucht, Ihre Methode in meinem Fall (mein letzter plunker-version). Es funktioniert für die erste änderung der select-Optionen, aber wenn der Benutzer seine Auswahl von Lehrer zu Schüler die Prüfungen sind noch befestigt und Formular-Validierung nicht erfolgreich durchgeführt werden. Außerdem nicht sicher, warum addControls nicht so, wie ich es verwenden möchten.??

Kostenlose Online-Tests