File

src/app/user/kyc-form.component.ts

Implements

OnInit

Metadata

selector app-kyc-form
styleUrls ./kyc-form.component.less
templateUrl ./kyc-form.component.html

Index

Properties
Methods

Constructor

constructor(fb: FormBuilder)
Parameters :
Name Type Optional
fb FormBuilder No

Methods

ngOnInit
ngOnInit()
Returns : void
save
save()
Returns : void
setMessage
setMessage(c: AbstractControl)
Parameters :
Name Type Optional
c AbstractControl No
Returns : void
setNotification
setNotification(notifyVia: string)
Parameters :
Name Type Optional
notifyVia string No
Returns : void

Properties

emailMessage
emailMessage: string
Type : string
kycForm
kycForm: FormGroup
Type : FormGroup
progress
progress: number
Type : number
Private validationMessages
validationMessages: object
Type : object
Default value : { required: 'Please enter your email address.', email: 'Please enter a valid email address.' }
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

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""