Modellgesteuerte Formularvalidierung funktioniert nicht

Question

Es beginnt frustrierend zu werden, wenn an der Model-Driven-Form-Validierung gearbeitet wird, die seit 2 Tagen noch nicht funktioniert.

Wie ich verstehe, gibt es immer noch einige Bugs mit Angular2 Beta noch. Ich habe das Beispiel von angular-io bei https://angular.io/docs/ts/latest/guide/forms.html und anderes Beispiel bei Forms In angular2 verwendet. Zwei Programmierer hier in meiner Firma haben mir gesagt, dass sie beide immer noch kein Formbeispiel haben.

Kann mir jemand ein funktionierendes Beispiel der Validierung liefern, die ich ausprobieren kann?

Answer 1

Nun, wie Sie bereits wissen, gibt es noch einige ausstehende Probleme im Zusammenhang mit angular2 Formen mit Validierung. Aber nachdem ich viel gesucht habe, habe ich nur wenige gefunden -

Erstens Für die Validierung müssen Sie ngControl verwenden, auch können Sie ngModel dh Zwei-Wege-Bindung von angular2 für den Erhalt von Werten von Formen ohne Zweifel wir kann nur ngControl für die Validierung und auch für Formularwerte verwenden. aber es ist eine gute Praxis, separate zu verwenden.

Verwenden Sie ngControl für den Validierungszweck. Es gibt Standard-Validatoren, die von eckigen zur Überprüfung zur Verfügung gestellt werden, wir können unsere benutzerdefinierte auch nach Bedarf erstellen und in der Validierung (ngControl) verwenden. Wenn wir eine modellgesteuerte Form erstellen wollen, müssen wir für jede Eingabe ein neues Steuerelement erstellen, indem wir Control() verwenden. für die Kontrolle, Kontrollgruppe und Validierung beziehen sich dies am besten artical

• http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
• http://blog.jhades.org/introduction-to-angular-2-forms-template-driven-vs-model-driven/

hier der Grund Beispiel ist Steuerungen für die Form der Verwendung:

this.CreateGroup = fb.group({ 
      'name': new Control(this.demoInfo.name, Validators.required), 
      'password': new Control(this.demoInfo.password, Validators.required), 
      'select': new Control(this.demoInfo.select, Validators.required) 
     }) 

i Hier haben Sie drei Eingänge namens name, passwort, wählen Sie jeweils. und entsprechend habe ich ihre Werte und Validatoren erwähnt (Standardvalidierung).

<input type="text" [(ngModel)]='demoInfo.name' ngControl='name'> 

hier ist, wie wir ngControl zu HTML-Seite definieren.

Arbeiten Demo von form in angular2 with validation.

• Forms In angular2 Beta

Answer 2

Der Schlüssel der Kontrollgruppe baut:

this.form = fb.group({ 
      "firstName": ['', Validators.required], 
      "streetAddress": ['',Validators.required], 
      "zip": ['', Validators.compose([zipValidator])], 
      "type": ['home'] 
     }); 

Hier sind ein paar Form Beispiele mit Validierung:

http://www.syntaxsuccess.com/angular-2-samples/#/demo/form Mehr Infos hier: http://www.syntaxsuccess.com/viewarticle/forms-and-validation-in-angular-2.0

Hier ist ein Beispiel für ein dynamische Form auch:

http://www.syntaxsuccess.com/angular-2-samples/#/demo/survey http://www.syntaxsuccess.com/viewarticle/dynamic-form-in-angular-2.0