App 7: Reactive Forms

app.component.css

.container {
  margin-top: 30px;
}

.header{
  text-decoration: underline;
  margin-bottom: 30px;
}

.errorBlock{
  opacity: 0.9;
}

app.component.html

<!--
    Create a Form with the following Controls and Validators
    1) Project Name (should not be empty)
    2) Mail (should not be a empty and a valid email)
    3) Project Status Dropdown, with three values: 'Stable', 'Critical', 'Finished'
    4) Submit Button

    Add your own Validator which doesn't allow "Test" as a Project Name

    Also implement that Validator as an async Validator (replace the other one)

    Upon submitting the form, simply print the value to the console
-->
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <h1 class='header'>App 7: Forms Practice: Reactive Forms</h1>
       <form (ngSubmit)="onSubmit()" [formGroup]="appForm">
         <div class='form-group'>
          <label>Project Name: </label>
          <input class='form-control' type="text" formControlName='projectName'/>
          <span class='errorBlock text-danger' *ngIf="!appForm.get('projectName').valid && appForm.get('projectName').touched">
            <p *ngIf="appForm.get('projectName').errors?.required">Field is required</p>
            <p *ngIf="appForm.get('projectName').errors?.nameIsNotAllowed">Field cannot use the name of "Test"</p>
          </span>
         </div>

         <div class='form-group'>
          <label>Mail: </label>
          <input class='form-control' type="text" formControlName='email'/>
          <span class='errorBlock text-danger' *ngIf="!appForm.get('email').valid && appForm.get('email').touched">
              <p *ngIf="appForm.get('email').errors?.required">Field is required</p>
              <p *ngIf="appForm.get('email').errors?.email">Field must be a valid email</p>
              <p *ngIf="appForm.get('email').errors?.emailUserNameIsNotAllowed">Field cannot contain username of "Test"</p>
              <p *ngIf="appForm.get('email').errors?.emailDomainNameIsNotAllowed">Field cannot contain domain name of "Test"</p>
          </span>
         </div>

         <div class='form-group'>
          <label>Project Status: </label>
          <select class="form-control" formControlName='status'>
            <option *ngFor="let state of statusCollection" [value]="state">{{state}}</option>
          </select>
         </div>
         <span class='errorBlock text-danger' *ngIf="!appForm.valid && appForm.touched">
           <p>The app form is invalid. Please see the above fields</p>
        </span>
        <div class='btn-toolbar'>
          <button type='submit' class='btn btn-info'><span class='glyphicon glyphicon-ok'></span> Submit</button>
          <button type='button' class='btn btn-warning' (click)="appForm.reset({'status': 'Stable'})"><span class='glyphicon glyphicon-trash'></span> Clear</button>
        </div>
       </form>
      <!--On sucess try animating in the data results -->
      <div *ngIf="submitted">
          <hr>
          <h4>Form Data: </h4>
          <div class="well well-lg">
            <p>Project Name: {{formRender.name}}</p>
            <p>Email: {{formRender.email}}</p>
            <p>Project Status:{{formRender.status}}</p>
          </div>
        </div>
    </div>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import {Observable} from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  appForm: FormGroup;
  statusCollection: String[];
  formRender: {'name': string, 'email': string, 'status': string};
  submitted: boolean;
  ngOnInit(){
    this.appForm = new FormGroup({
      'projectName': new FormControl(null,[Validators.required, this.nameIsNotAllowed]),
      'email': new FormControl(null,[Validators.required, Validators.email], this.emailIsNotAllowed),
      'status': new FormControl('Stable')
    });
    this.statusCollection = ['Stable','Critcal','Finished'];
    this.formRender = {
      'name': "",
      "email": "",
      "status": ""
    };
    this.submitted = true;
  }

  nameIsNotAllowed(inputControl: FormControl): {[key: string]: boolean}{
    if(inputControl.value){
      let lowercaseInputVal = inputControl.value.toLowerCase();
      if(lowercaseInputVal === 'test'){
        return {'nameIsNotAllowed': true};
      }
    }else{
      return null;
    }
  }

  emailIsNotAllowed(inputControl: FormControl):Promise<any> | Observable<any> {
    let emailNameAndDomain = inputControl.value.split('@');
    const promise = new Promise<any>((resolve, reject) => {
      setTimeout(() => {
        if(emailNameAndDomain[0].toLowerCase() === 'test'){
          resolve({'emailUserNameIsNotAllowed': true});
        }else if (emailNameAndDomain[1].toLowerCase().indexOf('test') !== -1){
          resolve({'emailDomainNameIsNotAllowed': true});
        }
        else{
          resolve(null);
        }
      }, 1500);
    });
    return promise;
  }

  onSubmit(){
    debugger;
    console.log(this.appForm);
    if(this.appForm.valid){
      this.formRender.name = this.appForm.get('projectName').value;
      this.formRender.email = this.appForm.get('email').value;
      this.formRender.status = this.appForm.get('status').value;
      this.appForm.reset({'status': 'Stable'});
    }
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }