Angular Forms Flashcards
NgForm directive is added automatically by angular and it is
internal to angular. We never should set it.
What #form=”ngForm” gives us ?
access to the NgForm object
ngModel directive should be placed on
every field that we want angular to know about
Two-way data binding
is banana in a box [(ngModel)]=”userSettings.name”
Spread operator …this.originalUserSettings (…) makes
copy of each property. Creates a copy of top-level properties
To do a deep clone use
Lodash in angular.
Using NgForm directive is done by
form=”ngForm”
ngModel build the
form.value object. Name attribute is required.
ng-untouched, ng-touched
Field starts off with the ng-untouched class. When we blur it it goes to ng-touched.
ng-pristine
Field value starts as unmodified.
ng-dirty means that
The field was modified
ng-valid, ng-invalid.
If value is valid, class will be ng-valid. If is invalid, class is ng-invalid.
the NgModel object has the propertyies like the CSS values for validation
untouched, touched, pristine, dirty, valid, invalid
To add class conditionally
bind to [class.field-error]="form.sbumitted & nameField.invalid" where .field-error is a class with error styling and nameField is property holding the ngModel of the name field.
form is property holding the ngForm
Blur event is called by
(blur)=”onBlur(nameField)” in html and in ts
onBlur(field: NgModel) {
}
What to do in order to get an observable to start working?
Call it’s subscribe method.
The “async” pipe (*ngFor=”let type of subscriptionTypes | async”) will
wait until the observable has gotten its data is completed until it builds up our element. In this way if we are waiting for items to load asynchronously we won’t get any template errors. As soon as items resolves, our element will be updated.
Check out angular.io/resources for different UI angular components
