reactive form validation

Author: majid noureddine

src/app/new-user/new-user.component.html

@@ -20,6 +20,14 @@
                 <option value="jus de mangue">Jus de mangue</option>
             </select>
         </div>
-        <button type="submit" class="btn btn-primary">Soumettre</button>
+        <div formArrayName="hobbies">
+            <h3>Vos hobbies</h3>
+            <div class="form-group" *ngFor="let hobbyControl of getHobbies().controls; let i = index">
+                <input type="text" class="form-control" [formControlName]="i">
+            </div>
+            <button type="button" class="btn btn-success" (click)="onAddHobby()">Ajouter</button>
+            <button type="button" class="btn btn-danger" (click)="onRemoveHobby()">Supprimer</button>
+        </div>
+        <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Soumettre</button>
     </form>
 </div>

src/app/new-user/new-user.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {UserService} from '../services/user.service';
 import {Router} from '@angular/router';
 import {User} from '../models/User.model';
@@ -24,10 +24,11 @@ export class NewUserComponent implements OnInit {
 
   initForm() {
     this.userForm = this.formBuilder.group({
-      firstName: '',
-      lastName: '',
-      email: '',
-      drinkPreference: ''
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      drinkPreference: ['', Validators.required],
+      hobbies: this.formBuilder.array([])
     });
   }
 
@@ -37,9 +38,23 @@ export class NewUserComponent implements OnInit {
         formValue['firstName'],
         formValue['lastName'],
         formValue['email'],
-        formValue['drinkPreference']
+        formValue['drinkPreference'],
+        formValue['hobbies'] ? formValue['hobbies'] : []
     );
     this.userService.addUser(newUser);
     this.router.navigate(['/users']);
   }
+
+  getHobbies(): FormArray {
+    return this.userForm.get('hobbies') as FormArray;
+  }
+
+  onAddHobby() {
+    const newHobbyControl = this.formBuilder.control(null, Validators.required);
+    this.getHobbies().push(newHobbyControl);
+  }
+
+  onRemoveHobby() {
+    this.getHobbies().removeAt(-1);
+  }
 }