Angular generic forms

How many times have you found yourself implementing the same forms functionality over and over again? Same validations, same error messages and even the same forms designs.
How many times have you copied the whole form because you were using the same fields but in a different context?
Let's build our custom re-usable form inputs and create truly generic forms using Angular.

Transcript

1. Generic Forms @eliraneliassy ng-japan 2019
2. About mySelf • Experienced FE developer, specialised in B2C applications • Founder & developer @ e-square.io • Angular-IL & AngularUP conf CO-organiser • Writer for AngularInDepth
3. Building powerful Angular community
4. Reusable Form Controls
5. Where it all begins…
6. Where it all begins…
7. Email input X12
9. Demo 1 Creating reusable form control
10. Objective 1 reusable form control Requirements: • Should support type text and password • Should support validations for required and pattern • Should show UI indications • Show show error messages
11. export class FirstCustomInputComponent { @Input() type = 'text'; @Input() isRequired: boolean = false; @Input() pattern: string = null; @Input() label: string = null; @Input() placeholder: string; @Input() errorMsg: string; } Reusable Custom Input
12. <div class="form-label-group"> <input class="form-control" [type]="type" #input [placeholder]="placeholder" ngModel> <div class="d-flex"> <span class="v" *ngIf="input.valid"> <img src="./assets/images/v.svg"> </span> <label class="mr-auto">{{label}} <span class="required" *ngIf="isRequired">*</span> </label> <span class="error" *ngIf="!input.valid">{{errorMsg}}</span> </div> </div> Reusable Custom Input
13. <div class="form-label-group"> <input class="form-control" [type]="type" #input [placeholder]="placeholder" ngModel> <div class="d-flex"> <span class="v" *ngIf="input.valid"> <img src="./assets/images/v.svg"> </span> <label class="mr-auto">{{label}} <span class="required" *ngIf="isRequired">*</span> </label> <span class="error" *ngIf="!input.valid">{{errorMsg}}</span> </div> </div> Reusable Custom Input
14. <div class="form-label-group"> <input class="form-control" [type]="type" #input [placeholder]="placeholder" ngModel> <div class="d-flex"> <span class="v" *ngIf="input.valid"> <img src="./assets/images/v.svg"> </span> <label class="mr-auto">{{label}} <span class="required" *ngIf="isRequired">*</span> </label> <span class="error" *ngIf="!input.valid">{{errorMsg}}</span> </div> </div> Reusable Custom Input
15. <div class="form-label-group"> <input class="form-control" [type]="type" #input [placeholder]="placeholder" ngModel> <div class="d-flex"> <span class="v" *ngIf="input.valid"> <img src="./assets/images/v.svg"> </span> <label class="mr-auto">{{label}} <span class="required" *ngIf="isRequired">*</span> </label> <span class="error" *ngIf="!input.valid">{{errorMsg}}</span> </div> </div> Reusable Custom Input
16. Using the custom form control <form class="form-signin" (ngSubmit)="onSubmit(f.value)" #f="ngForm"> <app-first-custom-input [placeholder]="'Email'" [isRequired]="true" [errorMsg]="'Please enter your name'" [label]="'User Email'" [pattern]="'[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}'" ngModel name="email"> </app-first-custom-input> <button class="btn btn-lg btn-primary btn-block" [disabled]="!f.valid" type="submit"> Sign in </button> </form>
17. Using the custom form control <form class="form-signin" (ngSubmit)="onSubmit(f.value)" #f="ngForm"> <app-first-custom-input [placeholder]="'Email'" [isRequired]="true" [errorMsg]="'Please enter your name'" [label]="'User Email'" [pattern]="'[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}'" ngModel name="email"> </app-first-custom-input> <button class="btn btn-lg btn-primary btn-block" [disabled]="!f.valid" type="submit"> Sign in </button> </form>
18. No value accessor for form control
20. The ControlValueAccesor interface A bridge between our custom input to the Angular forms API
21. Using the custom form control export interface ControlValueAccessor { writeValue(obj: any): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; setDisabledState?(isDisabled: boolean): void; }
22. Demo 2 Creating reusable form control using the ControlValueAccessor interface
23. And…THAT’ IT!
24. Reusable Form
25. Now we got this…
26. Objective 2- reusable form Requirements: • Create an Address form which can be reused. • Implement the form - UI, controls, Validations - just once.
27. Demo 3 Reusable form with the ControlValueAccessor
28. Sub forms
29. Demo 4 Sub forms
30. • The ControlValueAccessor as a bridge between Angular forms API to our custom controls and reusable forms. • How the DI can help us to inject the NgControl in order to get the control reference. • How we can leverage the DI to create sub forms. Summary
31. http://bit.ly/reusable-angular-forms @eliraneliassy
32. Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy https://eliassy.dev