Learn Angular 4.0 In 10 Days - ngForms And ngContent - Day Six

• Easy to use
• Suitable for simple scenarios and fails for complex scenarios
• Similar to angular 1.0
• Two-way data binding (using [(NgModel)] syntax)
• Minimal component code
• Automatic track of the form and its data
• Unit testing is another challenge

In this simple example we cannot really see it, but keeping the template as the source of all form validation truth is something that can become pretty hairy rather quickly.

As we add more and more validator tags to a field or when we start adding complex cross-field validations the readability of the form decreases, to the point where it will be harder to hand it off to a web designer.

The upside of this way of handling forms is its simplicity, and it is probably more than enough to build a very large range of forms.

On the downside, the form validation logic cannot be unit tested. The only way to test this logic is to run an end to end test with a browser, for example using a headless browser like PhantomJs.

While using of directives in our templates gives us the power of rapid prototyping without too much boilerplate, we are restricted in what we can do. Reactive forms, on the other hand, let us define our form through the code and give us much more flexibility and control over data validation.

• UNIT TESTABLE
  Since we have the form model defined in our code, we can unit test it.

• LISTEN TO FORM AND CONTROLS CHANGES
  With reactive forms, we can listen to form or control changes easily. Each form group or form control exposes a few events which we can subscribe to (e.g. statusChanges, valuesChanges, etc).

To begin, we must first ensure we are working with the right directives and the right classes in order to take advantage of procedural forms. For this, we need to ensure that the ReactiveFormsModule was imported in the bootstrap phase of the application module. This will give us access to components, directives, and providers like FormBuilder, FormGroup, and FormControl.