Note Angular 6+ (p3)

ngx-select-dropdown required validation
Default ngx-dropdown input required not work.

<ngx-select-dropdown [config]="exerciseDropdownConfig" [options]="exercises"    [(value)]="exercise_id"></ngx-select-dropdown>

https://github.com/optimistex/ngx-select-ex/issues/44
[(value)]="exercise_id" : exercise_id is ngModel or formControlName in reactive form ?
It seem  exercise_id: ['', [Validators.required]],  not work, exercise value selected now is an ojbect ie. {['id': 1, 'name': 'Exercise 1']}; So validation need some work around.

$ sign in typescript indicate it is Observable
https://stackoverflow.com/questions/37671700/angular2-style-guide-property-with-dollar-sign
Create object based on interface
https://stackoverflow.com/questions/13142635/how-can-i-create-an-object-based-on-an-interface-file-definition-in-typescript

Interface vs Model, when to use ? different ?
nterfaces are only at compile time. This allows only you to check that the expected data received follows a particular structure. For this you can cast your content to this interface:

this.http.get('...')
    .map(res => <Product[]>res.json());
See these questions:

How do I cast a JSON object to a typescript class
How to get Date object from json Response in typescript
You can do something similar with class but the main differences with class are that they are present at runtime (constructor function) and you can define methods in them with processing. But, in this case, you need to instantiate objects to be able to use them:

this.http.get('...')
    .map(res => {
      var data = res.json();
      return data.map(d => {
        return new Product(d.productNumber,
          d.productName, d.productDescription);
      });
    });

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
Many problem surfaced when we work in real form, some comments have pointed out:
- Multi step form, modal
- Large form with many special/custom input, ie. ngx-select-dropdown
- Conditional validation, ie. when 'Other' option chosen then user must provide more detail in another input
- Datetime ...

Comment 1:
Rob90 • 4 months ago
I disagree that reactive forms are a good choice for large forms.
It just adds a lot of boilercode in your components. I came from angularjs and i really do love template driven forms just because they don't require you to define forms and values and a lot of other stuffs. You just have an object from api...good...put that in [(ng-model)] and that's it.
From Html view i think adding required, minlength, maxlength, pattern inthere is better, you can reuse these html files in other types of applications. Adding those things in components is just not readable and not reusable.
These days i had an issue with the fact that i wanted to disable some inputs in case a checkbox was set to false. First response was to add a directive on each of those inputs that will watch my checkbox and change their states. With Template driven forms i wouldn't have any worries about it. It seems stupid, the value was changing, but a simple control refused to watch it and i had to make it manually disabled.
I'm not sure why you say an auto-save form cannot be done easily using template driven forms.
You can just use ViewChild and voila...a reactive form with subscribers and whatever.
Again another issue with the fact that form initialization was done after an api call, you don't want to mess with previous developer code so add more *ngIf-s and more properties to display that form after you had it initialised, because there is no instance of that form group when dom is loaded. On one environment the call was made faster and on another environment the app was broken. Sure...take your time to deal with these issues because it have "react" in the name.
I don't know reactive forms, but until now foreach control i have written at least 3 readable lines, i don't like it at all. If it wasn't for initialization and boilercode i may have been happy using them, but i just feel that it's adding a lot of problems in long term, as developers will find "solutions" that will mix everything until the point of just needing a rewrite.

I have been creating a template driven form with more than 25 inputs that included material inputs(text), checkboxes, google autocomplete, chips, selects, image uploader, tabs with textareas and i seriously doubt that i couldn't add more without risking it to become a nightmare. If i would've had to add reactive initialization on top of it, i would've need probably 3 more service files just for initialization(i do like creating services).
From my point of view performance may be an issue, but as someone below i will wait if you have to say something about it and if there are any hints on template driven forms.

=> Solution that I have (partial) solved (or I think at least I'm OK with it):
- Multi step form: With validation, catch Next() event, each step has it own 'submitted' or 'finished' state.
=> If step 1 done -> click Next() mean that form 1 finished => Show error message if formControlName invalid.
...

reactive form setValue (for all), patchValue (some field is ok)
https://stackoverflow.com/questions/38655613/angular2-set-value-for-formgroup
This is why I get error null or no init value for some field when call setValue for only one or some field instead of all.

Debt
Nested subscribe, observer ... rxjs should be used and use propertly.
https://stackoverflow.com/questions/40788163/how-to-make-nested-observable-calls-in-angular2

            <div class="col-md-8">
                <input class="form-control"
                        id="productNameId"
                        type="text"
                        placeholder="Name (required)"
                        required
                        minlength="3"
                        [(ngModel)] = product.productName
                        name="productName"
                        #productNameVar="ngModel" />
                <span class="help-block" *ngIf="(productNameVar.touched ||
                                                 productNameVar.dirty || product.id !== 0) &&
                                                 productNameVar.errors">
                    <span *ngIf="productNameVar.errors.required">
                        Product name is required.
                    </span>
                    <span *ngIf="productNameVar.errors.minlength">
                        Product name must be at least three characters.
                    </span>
                </span>
            </div>

*ngIf="newPassword.touched && newPassword.errors?.required"
Question sign in directive

lodash try
https://medium.com/@armno/til-importing-lodash-into-angular-the-better-way-aacbeaa40473
https://github.com/angular/angular/issues/18567
null as 'null' string in URLSearchParams Angular
https://angular.io/api/http/URLSearchParams
=> use set instead of append, set remove or something like this to avoid param1=null&param2=undefined. So avoid 'null' resulted in DB.

Debt
https://stackoverflow.com/questions/49284110/angular5-custom-validator-for-date-min

https://netbasal.com/three-ways-to-dynamically-alter-your-form-validation-in-angular-e5fd15f1e946
https://toddmotto.com/classes-vs-interfaces-in-typescript
https://itnext.io/dont-clone-back-end-models-in-angular-f7a749bdc1b0
https://blog.johanneshoppe.de/2016/10/angular-2-how-to-use-date-input-controls-with-angular-forms/