Angular 5 Reactive-Formular: wie dynamisch Validatoren in einer Formularsteuerung hinzufügen, und Fehler anzeigen, wenn ein Benutzer das Formular

Ich versuche, erforderlichen Validator, die scheint zu funktionieren (validiert onBlur und onSubmit) if Der Benutzer hat vor dem Absenden auf das Feld geklickt. Bei der Übertragung eines unberührten Formulars werden die Steuerelemente jedoch nicht validiert.Angular 5 Reactive-Formular: wie dynamisch Validatoren in einer Formularsteuerung hinzufügen, und Fehler anzeigen, wenn ein Benutzer das Formular

Usecase: Benutzer sollten in der Lage seine Form zu durchqueren, ohne Fehler für erforderlich Feld auftauchen. Wenn der Benutzer einige Daten eingibt und das Feld eine andere Validierung aufweist, sollte dies validiert werden und Fehler bei der Unschärfe angezeigt werden. Wenn ein Benutzer ein Formular einreicht, ohne die erforderlichen Felder auszufüllen, sollten Fehler angezeigt werden. Wenn der Benutzer sich wieder auf das Feld konzentriert, sollte der Fehler verschwinden. Wenn der Benutzer das Feld jetzt jedoch verlässt, ohne etwas einzugeben (leer), sollte der erforderliche Fehler angezeigt werden.

Ich habe eine Plunker Demo, was ich bisher habe.

export class App implements OnInit { 
name: string; 
myform: FormGroup; 
email: FormControl; 

constructor() { 
    this.name = `Angular! v${VERSION.full}` 
} 

myform: FormGroup; 
email: FormControl; 

ngOnInit() { 
    this.createFormControls(); 
    this.createForm(); 
} 

    onSubmit() { 
console.log('sumbitted'); 
    this.email.setValidators([ 
    Validators.required, 
    specialCharValidator]); 
this.email.updateValueAndValidity() 
} 

createFormControls() { 
this.email = new FormControl('', { 
    updateOn: 'blur', validators: [ 
    Validators.required, 
    specialCharValidator 
    ] 
    }); 
} 

    createForm() { 
this.myform = new FormGroup({ 
    email: this.email, 
}); 
} 

errorAdd(check) { 
if (check.target.checked) { 
    this.email.setValidators([ 
    Validators.required, 
    specialCharValidator]); 
    console.log('on'); 
} else { 
    console.log('off'); 
    this.email.setValidators([specialCharValidator]); 
    this.email.updateValueAndValidity() 
    } 
} 

}

Quelle

2017-11-23 salzz4u

Sie gehen leicht aus der Richtung. Die Validierungsregeln sollten immer vorhanden sein, es sollte nur der Fehler ausgeblendet werden, wenn die Felder nicht verändert wurden und das Formular nicht übergeben wurde. –

Sieht so aus, als ob das Formular korrekt validiert wurde, ich habe einfach nicht die Informationen verwendet, um den Fehler richtig anzuzeigen. Aktualisiert Plunker: https://plnkr.co/edit/X91VjHmMp1W1LuUdcKy1?p=preview

submitted: boolean; 
onSubmit() { 
this.submitted = true; 
}

und in Vorlage

*ngIf="alphanumeric.errors && (submitted || alphanumeric.dirty || alphanumeric.touched)">

Quelle

2017-11-23 23:32:32 salzz4u

Ich glaube nicht, sollten Sie Validatoren dynamisch hinzufügen/entfernen, ein besserer Ansatz wäre es, die Fehlermeldungen aktivieren/deaktivieren Sie je nach der Zustand der Felder (schmutzig/unberührt/berührt). Auf diese Weise können Sie steuern, wann die Fehler in der Benutzeroberfläche angezeigt werden, indem Sie Ihre benutzerdefinierten Regeln erstellen. z. B.

this.form.get(field).valid && this.form.get(field).touched

Quelle

2017-11-24 04:05:07

Angular 5 Reactive-Formular: wie dynamisch Validatoren in einer Formularsteuerung hinzufügen, und Fehler anzeigen, wenn ein Benutzer das Formular

Antwort

Verwandte Themen