Formular handling in AngularJS

16
Formulare in AngularJS

Transcript of Formular handling in AngularJS

Page 1: Formular handling in AngularJS

Formulare in AngularJS

Page 2: Formular handling in AngularJS

@jowe Entwickelt bei Mayflower

Johannes Weber

Page 3: Formular handling in AngularJS

AngularJSFormulare

‣ Validation Basics ‣ ModelController ‣ FormController ‣ Custom Validation

Page 4: Formular handling in AngularJS

AngularJSValidation Basics

‣ $valid ‣ $invalid ‣ $dirty ‣ $pristine ‣ $error

Page 5: Formular handling in AngularJS

AngularJSFormulare

Page 6: Formular handling in AngularJS

AngularJSModelController

Page 7: Formular handling in AngularJS

AngularJSModelController

‣ API für ngModel Direktive ‣ Services für ‣ Data-binding ‣ Validation ‣ CSS update ‣ Formatting & parsing

Page 8: Formular handling in AngularJS

AngularJSFormController

Page 9: Formular handling in AngularJS

AngularJSFormController

‣ Kontrolle über Form Controls ‣ valid/invalid ‣ dirty/pristine ‣ errors

Page 10: Formular handling in AngularJS

AngularJSForm- & ModelController

Page 11: Formular handling in AngularJS

AngularJSValidation

‣ $valid ‣ $invalid ‣ $dirty ‣ $pristine ‣ $error

Page 12: Formular handling in AngularJS

AngularJSValidation

Page 13: Formular handling in AngularJS

Demohttp://jowe.cc/angular-form/

Page 14: Formular handling in AngularJS

AngularJSCustom Validation

‣ Als eigene Direktive ‣ Zugriff auf NgModelController

‣ Model ➞ View update ‣ Formatter function to $formatters[]

‣ View ➞ Model update ‣ Parser function to $parsers[]

Page 15: Formular handling in AngularJS

Demohttps://gist.github.com/johannes-weber/8975897

Page 16: Formular handling in AngularJS

@jowe

Vielen Dank für’s Zuhören <3Johannes Weber