What is the difference between formControlName and FormControl?

by

I believe you missed an important point: [formGroup] directive in the second example. formControlName is used together with [formGroup] to save your form multiple dot navigations. For example:

<div>
  <input type="text" [formControl]="myForm.controls.firstName"/>
  <input type="text" [formControl]="myForm.controls.lastName"/>
  <input type="text" [formControl]="myForm.controls.email"/>
  <input type="text" [formControl]="myForm.controls.title"/>
</div>

Is equivalent to:

<div [formGroup]="myForm">
  <input type="text" formControlName="firstName"/>
  <input type="text" formControlName="lastName"/>
  <input type="text" formControlName="email"/>
  <input type="text" formControlName="title"/>
</div>

Now imagine nested FormGroups 🙂

More Related Contents:

  1. formGroup expects a FormGroup instance
  2. ngModel cannot be used to register form controls with a parent formGroup directive
  3. Angular2 nested template driven form
  4. Angular how to get the multiple checkbox values?
  5. password and confirm password field validation angular2 reactive forms
  6. angular2 manually firing click event on particular element
  7. Apply a directive conditionally
  8. two way binding with safe navigation operator
  9. What are the practical differences between template-driven and reactive forms?
  10. Angular 2 Form “Cannot find control with path”
  11. ERROR Error: No value accessor for form control with unspecified name attribute on switch
  12. Angular2 – Validate and submit form from outside
  13. Angular 2 – formControlName inside component
  14. Resetting a form in Angular 2 after submit
  15. Generic email validator
  16. Is it possible to get native element for formControl?
  17. ng-content select bound variable
  18. The pipe ‘ ‘ could not be found angular2 custom pipe
  19. Angular2: validation for won’t trigger when changing the file to upload
  20. addControl to FormGroup dynamically in Angular
  21. How to reset form validation on submission of the form in ANGULAR 2
  22. FormBuilder group is deprecated
  23. How to Using a FormArray in a FormGroup
  24. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  25. How to clear form after submit in Angular 2?
  26. Angular 2 Reactive Forms trigger validation on submit
  27. Angular 2 creating reactive forms with nested components
  28. Angular 2 FormGroup Add Validators dynamic
  29. Forms In angular2
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment