src/app/user/kyc-form.component.ts
selector | app-kyc-form |
styleUrls | ./kyc-form.component.less |
templateUrl | ./kyc-form.component.html |
Properties |
Methods |
constructor(fb: FormBuilder)
|
||||||
Defined in src/app/user/kyc-form.component.ts:22
|
||||||
Parameters :
|
ngOnInit |
ngOnInit()
|
Defined in src/app/user/kyc-form.component.ts:26
|
Returns :
void
|
save |
save()
|
Defined in src/app/user/kyc-form.component.ts:60
|
Returns :
void
|
setMessage | ||||||
setMessage(c: AbstractControl)
|
||||||
Defined in src/app/user/kyc-form.component.ts:65
|
||||||
Parameters :
Returns :
void
|
setNotification | ||||||
setNotification(notifyVia: string)
|
||||||
Defined in src/app/user/kyc-form.component.ts:76
|
||||||
Parameters :
Returns :
void
|
emailMessage |
emailMessage:
|
Type : string
|
Defined in src/app/user/kyc-form.component.ts:17
|
kycForm |
kycForm:
|
Type : FormGroup
|
Defined in src/app/user/kyc-form.component.ts:15
|
progress |
progress:
|
Type : number
|
Defined in src/app/user/kyc-form.component.ts:16
|
Private validationMessages |
validationMessages:
|
Type : object
|
Default value : {
required: 'Please enter your email address.',
email: 'Please enter a valid email address.'
}
|
Defined in src/app/user/kyc-form.component.ts:19
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormBuilder, Validators, AbstractControl, ValidatorFn, FormArray } from '@angular/forms';
import {ProgressBarModule} from 'primeng/primeng';
import { debounceTime } from 'rxjs/operators';
@Component({
selector: 'app-kyc-form',
templateUrl: './kyc-form.component.html',
styleUrls: ['./kyc-form.component.less']
})
export class KycFormComponent implements OnInit {
kycForm: FormGroup;
progress: number;
emailMessage: string;
private validationMessages = {
required: 'Please enter your email address.',
email: 'Please enter a valid email address.'
};
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.progress = 16;
this.kycForm = this.fb.group({
userName: ['', [Validators.required, Validators.minLength(3)]],
// 1. email group
emailGroup: this.fb.group({
email: ['', [Validators.required, Validators.email]],
confirmEmail: ['', Validators.required],
}, { validator: emailMatcher }),
phone: '',
notification: 'email',
rating: [null, ratingRange(1, 5)]
// sendCatalog: true,
//addresses: this.fb.array([this.buildAddress()])
});
this.kycForm.get('notification').valueChanges.subscribe(
value => this.setNotification(value)
);
// 2 attaching the error message after a debounce of 1000
const emailControl = this.kycForm.get('emailGroup.email');
emailControl.valueChanges.pipe(
debounceTime(1000)
).subscribe(
value => this.setMessage(emailControl)
);
this.kycForm.valueChanges.subscribe(control=>{
debugger;
})
}
save() {
console.log(this.kycForm);
console.log('Saved: ' + JSON.stringify(this.kycForm.value));
}
// 3. custom validation for email
setMessage(c: AbstractControl): void {
this.emailMessage = '';
// 4. Reading from the class level variables
console.log(this.validationMessages);
if ((c.touched || c.dirty) && c.errors) {
this.emailMessage = Object.keys(c.errors).map(
key => this.emailMessage += this.validationMessages[key]).join(' ');
}
}
// Creating your own validation logic dynamically on a specific control.
setNotification(notifyVia: string): void {
const phoneControl = this.kycForm.get('phone');
if (notifyVia === 'text') {
phoneControl.setValidators(Validators.required);
} else {
phoneControl.clearValidators();
}
phoneControl.updateValueAndValidity();
}
}
// This can be moved out in a separate file of its own, and exported. Because it is outside the class.
// 1.1 the custom validation for email matcher.
function emailMatcher(c: AbstractControl): { [key: string]: boolean } | null {
const emailControl = c.get('email');
const confirmControl = c.get('confirmEmail');
if (emailControl.pristine || confirmControl.pristine) {
return null;
}
if (emailControl.value === confirmControl.value) {
return null;
}
return { 'match': true };
}
function ratingRange(min: number, max: number):ValidatorFn{
return (c: AbstractControl) : { [key: string]:boolean } | null =>{
if(c!=null && (isNaN(c.value) || c.value<min || c.value > max))
{
return {'range': true};
}
return null;
}
}
<div class="card">
<div class="card-header">
Register KYC!
</div>
<div class="card-body">
<form novalidate (ngSubmit)="Save()"
[formGroup]="kycForm"
class="">
<div class="form-group row mb-2">
<label for="formProgress" class="col-md-2">Form completion progress:</label>
<div class="col-md-10">
<p-progressBar [value]="progress" name="formProgress">
</p-progressBar>
</div>
</div>
<div class="form-group row mb-2">
<label for="userName" class="control-label col-md-2">User Name:</label>
<div class="col-md-8">
<input type="text" class="form-control"
formControlName="userName" placeholder="User name (required)"
[ngClass]="{'is-invalid': (kycForm.get('userName').touched ||
kycForm.get('userName').dirty)
&& !kycForm.get('userName').valid}"/>
<span class="invalid-feedback">
<span *ngIf="kycForm.get('userName').errors?.required">
Please enter a user name!
</span>
<span *ngIf="kycForm.get('userName').errors?.minlength">
User name must be longer than 3 characters.
</span>
</span>
</div>
</div>
<div formGroupName="emailGroup">
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
for="emailId">Email</label>
<div class="col-md-8">
<input class="form-control"
id="emailId"
type="email"
placeholder="Email (required)"
formControlName="email"
[ngClass]="{'is-invalid': emailMessage }" />
<span class="invalid-feedback">
{{ emailMessage }}
</span>
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
for="confirmEmailId">Confirm Email</label>
<div class="col-md-8">
<input class="form-control"
id="confirmEmailId"
type="email"
placeholder="Confirm Email (required)"
formControlName="confirmEmail"
[ngClass]="{'is-invalid': kycForm.get('emailGroup').errors ||
((kycForm.get('emailGroup.confirmEmail').touched ||
kycForm.get('emailGroup.confirmEmail').dirty) &&
!kycForm.get('emailGroup.confirmEmail').valid) }" />
<span class="invalid-feedback">
<span *ngIf="kycForm.get('emailGroup.confirmEmail').errors?.required">
Please confirm your email address.
</span>
<span *ngIf="kycForm.get('emailGroup').errors?.match">
The confirmation does not match the email address.
</span>
</span>
</div>
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
for="phoneId">Phone</label>
<div class="col-md-8">
<input class="form-control"
id="phoneId"
type="tel"
placeholder="Phone"
formControlName="phone"
[ngClass]="{'is-invalid': !kycForm.get('phone').valid }" />
<span class="invalid-feedback">
<span *ngIf="kycForm.get('phone').errors?.required">
Please enter your phone number.
</span>
</span>
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label pt-0">Send Notifications</label>
<div class="col-md-8">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input"
type="radio"
value="email"
formControlName="notification"> Email
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input"
type="radio"
value="text"
formControlName="notification"> Text
</label>
</div>
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
for="ratingId">Rating</label>
<div class="col-md-8">
<input class="form-control"
id="ratingId"
type="number"
placeholder="Rate the app (1 to 5)"
formControlName="rating"
[ngClass]="{'is-invalid': (kycForm.get('rating').touched ||
kycForm.get('rating').dirty) &&
!kycForm.get('rating').valid }" />
<span class="invalid-feedback">
<span *ngIf="kycForm.get('rating').errors?.range">
Please rate your experience from 1 to 5.
</span>
</span>
</div>
</div>
</form>
<!-- <form novalidate
(ngSubmit)="save()"
[formGroup]="customerForm">
<div class="form-group row mb-2">
<div class="col-md-8">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input"
id="sendCatalogId"
type="checkbox"
formControlName1="sendCatalog">Send me your catalog
</label>
</div>
</div>
</div>
<div *ngIf="customerForm.get('sendCatalog').value">
<div formArrayName="addresses"
*ngFor="let address of addresses.controls; let i=index">
<div [formGroupName]="i">
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label pt-0">Address Type</label>
<div class="col-md-8">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input"
id="addressType1Id"
type="radio"
value="home"
formControlName1="addressType"> Home
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input"
id="addressType1Id"
type="radio"
value="work"
formControlName1="addressType"> Work
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input"
id="addressType1Id"
type="radio"
value="other"
formControlName1="addressType"> Other
</label>
</div>
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
attr.for="{{'street1Id' + i}}">Street Address 1</label>
<div class="col-md-8">
<input class="form-control"
id="{{'street1Id' + i}}"
type="text"
placeholder="Street address (required)"
formControlName="street1"
[ngClass]="{'is-invalid': (address.controls.street1.touched ||
address.controls.street1.dirty) &&
!address.controls.street1.valid }">
<span class="invalid-feedback">
<span *ngIf="address.controls.street1.errors?.required">
Please enter your street address.
</span>
</span>
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
attr.for="{{'street2Id' + i}}">Street Address 2</label>
<div class="col-md-8">
<input class="form-control"
id="{{'street2Id' + i}}"
type="text"
placeholder="Street address (second line)"
formControlName1="street2">
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
attr.for="{{'cityId' + i}}">City, State, Zip Code</label>
<div class="col-md-3">
<input class="form-control"
id="{{'cityId' + i}}"
type="text"
placeholder="City"
formControlName1="city">
</div>
<div class="col-md-3">
<select class="form-control"
id="{{'stateId' + i}}"
formControlName1="state">
<option value=""
disabled
selected
hidden>Select a State...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="col-md-2">
<input class="form-control"
id="{{'zipId' + i}}"
type="number"
placeholder="Zip Code"
formControlName1="zip">
</div>
</div>
</div>
</div>
<div class="form-group row mb-2">
<div class="col-md-4">
<button class="btn btn-outline-primary"
type="button"
[title]="addresses.valid ? 'Add another mailing address' : 'Disabled until the existing address data is valid'"
[disabled]="!addresses.valid"
(click)="addAddress()">
Add Another Address
</button>
</div>
</div>
</div>
<div class="form-group row mb-2">
<div class="offset-md-2 col-md-4">
<button class="btn btn-primary mr-3"
type="submit"
style="width:80px"
[title]="customerForm.valid ? 'Save your entered data' : 'Disabled until the form data is valid'"
[disabled]="!customerForm.valid">
Save
</button>
<button class="btn btn-outline-secondary"
type="button"
(click)="populateTestData()">
Test Data
</button>
</div>
</div>
</form> -->
</div>
</div>
./kyc-form.component.less