Skip to content

Instantly share code, notes, and snippets.

@latimeks
Created November 4, 2019 17:44
Show Gist options
  • Save latimeks/001c4182cf748ed25389e4f92018595a to your computer and use it in GitHub Desktop.
Save latimeks/001c4182cf748ed25389e4f92018595a to your computer and use it in GitHub Desktop.
App 7: Reactive Forms
.container {
margin-top: 30px;
}
.header{
text-decoration: underline;
margin-bottom: 30px;
}
.errorBlock{
opacity: 0.9;
}
<!--
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>
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'});
}
}
}
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 { }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment