Skip to content

Instantly share code, notes, and snippets.

@trashvin
Created January 8, 2018 06:19
Show Gist options
  • Save trashvin/6cf39c038ce8988ba451d61bbc8c2d85 to your computer and use it in GitHub Desktop.
Save trashvin/6cf39c038ce8988ba451d61bbc8c2d85 to your computer and use it in GitHub Desktop.
Using Simple Reactive Form in Angular5
<form [formGroup]="detail_form" (ngSubmit)="onSubmit()">
<fieldset>
<div class="row form-group">
<input class="form-control" id="title" placeholder="Enter Title" formControlName = "title" required>
<small *ngIf="detail_form.controls.title.invalid && detail_form.controls.title.touched" class="error">Title is empty.</small>
</div>
<div class="row form-group">
<textarea class="form-control" rows="10" id="poem" formControlName ="poem" required></textarea>
<small *ngIf="detail_form.controls.poem.invalid && detail_form.controls.poem.touched" class="error">Poem is empty.</small>
</div>
<div class="row form-group">
<input class="form-control" id="receipient" formControlName="receipient" placeholder="Email address of intended recepient (optional)">
<small *ngIf="detail_form.controls.receipient.invalid && detail_form.controls.receipient.touched" class="error">Invalid Email Address</small>
</div>
<div class="form-check" style="text-align: left">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked="" formControlName="is_public">
Show poem in public view
</label>
</div>
<div class="row form-group">
<input class="form-control" id="receipient" formControlName="tags" placeholder="Enter tags separated by comma (optional)">
</div>
<button class="btn" type="reset">Cancel</button>
<button class="btn btn-primary" type="submit">Submit</button>
</fieldset>
</form>
ngOnInit() {
this.detail_form = new FormGroup( {
title: new FormControl("", Validators.required),
poem: new FormControl("", Validators.required),
receipient: new FormControl("", Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")),
tags: new FormControl(),
is_public: new FormControl()
});
}
onSubmit() {
this.log.l(JSON.stringify(this.detail_form.value));
this.log.l(this.detail_form.status);
if(this.detail_form.status === "VALID") {
this.log.i("Saving....");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment