Angular Forms

Question 1

NgForm directive is added automatically by angular and it is

Answer 1

internal to angular. We never should set it.

Question 2

What #form=”ngForm” gives us ?

Answer 2

access to the NgForm object

Question 3

ngModel directive should be placed on

Answer 3

every field that we want angular to know about

Question 4

Two-way data binding

Answer 4

is banana in a box [(ngModel)]=”userSettings.name”

Question 5

Spread operator …this.originalUserSettings (…) makes

Answer 5

copy of each property. Creates a copy of top-level properties

Question 6

To do a deep clone use

Answer 6

Lodash in angular.

Question 7

Using NgForm directive is done by

Answer 7

form=”ngForm”

Question 8

ngModel build the

Answer 8

form.value object. Name attribute is required.

Question 9

ng-untouched, ng-touched

Answer 9

Field starts off with the ng-untouched class. When we blur it it goes to ng-touched.

Question 10

ng-pristine

Answer 10

Field value starts as unmodified.

Question 11

ng-dirty means that

Answer 11

The field was modified

Question 12

ng-valid, ng-invalid.

Answer 12

If value is valid, class will be ng-valid. If is invalid, class is ng-invalid.

Question 13

the NgModel object has the propertyies like the CSS values for validation

Answer 13

untouched, touched, pristine, dirty, valid, invalid

Question 14

To add class conditionally

Answer 14

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

Question 15

Blur event is called by

Answer 15

(blur)=”onBlur(nameField)” in html and in ts

onBlur(field: NgModel) {
}

Question 16

What to do in order to get an observable to start working?

Answer 16

Call it’s subscribe method.

Question 17

The “async” pipe (*ngFor=”let type of subscriptionTypes | async”) will

Answer 17

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.

Question 18

Check out angular.io/resources for different UI angular components