alexonozor

{
  "biodata": [
    {
      "JambRegNo": "011/02/CSC/1034",
      "MatricNo": "011/02/CSC/1034",
      "Title": "Mr",
      "Surname": "Abdallah",
      "FirstName": "Maryam",
      "MiddleName": "",
      "MaritalStatus": "",

alexonozor

function flatten(arr) {
  return arr.reduce(function (flat, toFlatten) {
    return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
  }, []);
}

alexonozor

import { FormControl } from ‘@angular/forms’;

export class UserComponent { 
  userName = new FormControl(); 
}

alexonozor

<label class="center-block">userName:
  <input class="form-control" [formControl]="userName">
</label>

alexonozor

import { FormControl, FormGroup } from '@angular/forms'; // notice we also import FormGroup

export class UsersComponent {
  userForm = new FormGroup ({
    userName: new FormControl()
  });
}

alexonozor

<form [formGroup]="userForm" novalidate>
  <div class="form-group">
    <label class="center-block">userName:
      <input class="form-control" formControlName="userName">
    </label>
  </div>
</form>

alexonozor

const userForm = new FormGroup({
 userName: new FormControl(''),
 firstName: new FormControl(''),
 lastName: new FormControl(''),
 address: new FormGroup({
   street: new FormControl(''),
   city: new FormControl(''),
   zipCode: new FormControl('')
 })
});

alexonozor

<div formGroupName="address" class="well well-lg">
  <div class="form-group">
    <label class="center-block">Street:
      <input class="form-control" formControlName="street">
    </label>
  </div>
  <div class="form-group">
    <label class="center-block">City:
      <input class="form-control" formControlName="city">
    </label>

alexonozor

<p>UserName value: {{ userForm.get('userName').value }}</p>

//Get the street of the nested address
<p>Street value: {{ userForm.get('address.street').value}}</p>

alexonozor

/** A user name  can't match the given regular expression */
export function forbiddenUserNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}