data.component.ts

import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
// import { Observable } from 'rxjs/Rx';

/**
 * data.component.ts
 */

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styles: []
})
export class DataComponent {

  forma: FormGroup;



  usuario: Object = {
    nombrecompleto: {
      nombre: 'Hector',
      apellido: 'Alpizar'
    },
    correo: 'hector.alpizar@mail.com',
    // pasatiempos: ['Correr', 'Dormir', 'Comer']
  };

  constructor() {
    this.forma = new FormGroup({
                                'nombrecompleto': new FormGroup({
                                  'nombre': new FormControl('', [
                                    Validators.required,
                                    Validators.minLength(5)
                                  ]),
                                  'apellido': new FormControl('', [
                                    Validators.required,
                                    this.noAlpizar
                                  ])
                                }),
                'correo': new FormControl('', [
                                                Validators.required,
                                                Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
                                              ]
                                          ),
                'pasatiempos': new FormArray(
                  [new FormControl('Correr', Validators.required)]
                  // this.getPasatiempos()
                ),
                'usuario': new FormControl('', Validators.required, this.usuarioExiste),
                'password1': new FormControl('', Validators.required),
                'password2': new FormControl('')
    });

    // this.forma.setValue(this.usuario);

    this.forma.controls['password2'].setValidators([
      Validators.required,
      this.noIgual.bind(this.forma)
    ]);

    console.log(this.forma);
  }

  guardarCambios() {
    console.log('guardarCambios()');

    this.forma.reset({
      nombrecompleto: {
        nombre: '',
        apellido: ''
      },
      correo: ''
    });
  }

  // getPasatiempos(): FormControl[] {
  //   const fc: FormControl[] = [];
  //   for (let pasatiempo of this.usuario.pasatiempos) {

  //     const temp = new FormControl(pasatiempo, Validators.required);

  //     console.log(temp.value);

  //     fc.push(temp);
  //   }
  //   return fc;
  // }

  agregarPasatiempos() {

    console.log('agregarPasatiempos()');

    (<FormArray>this.forma.controls['pasatiempos']).
      push(new FormControl('', Validators.required));

      console.log(this.forma);
  }

  noAlpizar(control: FormControl): {[s: string]: boolean} {
    if (control.value === 'Alpizar') {
      return {
       noalpizar: true
      };
    }

    return null;
  }

  noIgual(control: FormControl): { [s: string]: boolean } {
    const forma: any = this;

    if (control.value !== forma.controls['password1'].value) {

      return {
        noiguales: true
      };
    }

    return null;
  }

  usuarioExiste(control: FormControl): Promise<any> | Observable<any> {
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        if (control.value === 'cholo') {
          resolve( { usuarioexiste: true } );
        } else {
          resolve( null );
        }
      }, 3000);
    });

    return promise;
  }

}