{"id":165,"date":"2018-03-06T03:41:51","date_gmt":"2018-03-06T03:41:51","guid":{"rendered":"http:\/\/www.bhoomabrsr.com\/blog\/?p=165"},"modified":"2019-11-14T03:48:15","modified_gmt":"2019-11-14T03:48:15","slug":"reactive-forms-angular-v5-x","status":"publish","type":"post","link":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/2018\/03\/06\/reactive-forms-angular-v5-x\/","title":{"rendered":"Reactive Forms – Angular v5.x"},"content":{"rendered":"

In the last article, we discussed Template-driven forms and this article is going to explore about Reactive forms. Both Reactive and template-driven form available under @angular\/forms with module names of ReactiveFormsModule<\/em> and FormsModule<\/em> respectively.Reactive forms required more coding than template-driven way, but these will give more control on forms than template-driven.
\nReactive Forms:
\nInstead of angular, we need to create FormGroup and FromControllers mapping between UI and form model.
\nAdvantages:
\n1) Field Value and validity updates are always synchronous, so we won’t encounter the timing issues that sometimes occur in a template-driven form.
\n2) Reactive forms are easy to write Unit test cases because of most of the business logic available inside of the component.
\nREACTIVE DRIVEN DIRECTIVES:
\n\"\"<\/p>\n

    \n
  1. FormGroupDirective<\/em> – Binds an existing FormGroup to a DOM element.\n
      \n
    • Usage: [formGroup]=”farmersForm”<\/strong><\/li>\n<\/ul>\n<\/li>\n
    • FormGroupName <\/em>– Syncs a nested FormGroup to a DOM element.\n
        \n
      • Usage: formGroupName=”farmerAddress”<\/strong><\/li>\n<\/ul>\n<\/li>\n
      • FormControlDirective<\/em> – Syncs a standalone FormControl instance to a form control element.\n
          \n
        • Usage: [formControl]=”farmerName”<\/strong><\/li>\n<\/ul>\n<\/li>\n
        • FormControlName <\/em>– Syncs a FormControl in an existing FormGroup to a form control element by name.\n
            \n
          • Usage: formControlName=”farmerName”<\/strong>
            \n(alternatively) [formControl]=\u201dfarmersForm.controls.farmerName\u201d<\/strong><\/li>\n<\/ul>\n<\/li>\n
          • FormArrayName <\/em>– Syncs a nested FormArray to a DOM element.\n
              \n
            • Usage: formArrayName=”grainsTypes”<\/strong><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

              Simply:
              \n\"\"
              \nExample: Live Example<\/a><\/p>\n