NG Interview Set I - Forms Questions

Question 1

When do you use template driven vs model driven forms? Why?

Answer 1

• Template driven forms make more sense for simpler forms, at least in terms of validation
• Model driven or Reactive forms lend themselves to easier testing of the validation logic, so if that’s complex, Reactive forms make more sense
• There’s also the issue of asynchronous (template driven forms) vs. synchronous (model driven)

Question 2

How do you submit a form?

Answer 2

• use the ngSubmit event binding like so:

< form (ngSubmit)=" onSubmit()" ... >

Question 3

What’s the difference between NgForm, FormGroup, and FormControl? How do they work together?

Answer 3

• FormGroup tracks the value and validity state of a group of AbstractControl instances
• FormControl does the same for an individual control
• NgForm is a directive that Angular automatically attaches to each < form > tag
• It has its own ‘valid’ property which is true only if every contained control is valid

Question 4

What’s the advantage of using FormBuilder?

Answer 4

• Reduces repetition and clutter by handling details of control creation for you

Question 5

How do you add form validation to a form built with FormBuilder?

Answer 5

• pass in Validator objects along with the FormControl objects…

Question 6

What’s the difference between dirty, touched, and pristine on a form element?

Answer 6

• Dirty means it contains user data, touched means the user has at least done something with a particular control (perhaps just literally ‘touched’ it by giving it focus?), and pristine means the control has not been touched at all by the user

Question 7

How can you access validation errors in the template to display error messages?

Answer 7

• Use formErrors

Question 8

What is async validation and how is it done?

Answer 8

• Verifying some field using some asynchronous call (perhaps a server call) … return a Promise < ValidationResult > from your validator. When creating a FormControl object, you can pass an asynchronous validator into the constructor (e.g. new FormControl(‘value’, syncValidator, asyncValidator))

Question 9

What is patchValue used for?

Answer 9

• Setting a form value (one or more fields with an object) bypassing validation