Angular Templates Driven Form

Template-Driven Forms iFour Consultancy

https://www.ifourtechnolab.com/

Index ❏ ❏ ❏ ❏ ❏ ❏ ❏ ❏ ❏

Introduction Building a Bootstrap Form Types of Forms ngModel Adding Validation Specific Validation Errors ngForm ngModelGroup Disabling the Submit Button

https://www.ifourtechnolab.com/

❑Introduction ❏ Forms are the mainstay of business applications. You use forms to log in, submit a help request, place an order, book a flight, schedule a meeting, and perform countless other dataentry tasks. ❏ Applications use forms to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks. ❏ Template-driven forms are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms. ❏ If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.

https://www.ifourtechnolab.com/

Template-driven Forms

Building a Bootstrap Form ❏ For adding Bootstrap theme into our application we insert this following link to our index.html:<link rel= “stylesheet” href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> ❏ We can add bootstrap-css into style.css ❏ Then we generate a component into our application by the command:- ng g component information

https://www.ifourtechnolab.com/

❑Building a Bootstrap Form ❏ Then in Information.component.html we write:<div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="name" name="name"> </div> <div class="form-group"> <label for=“email">EmailId</label> <input type="text" class="form-control" id=" email " [(ngModel)]="email " name=" email "> </div> <div class="form-group"> <label for=“contact">Contact Number</label> <input type="text" class="form-control" id="contact " [(ngModel)]="contact " name=" contact "> </div>

Contd….. https://www.ifourtechnolab.com/

❑Building a Bootstrap Form <div class="form-group"> <label for=“social">Social Media</label> <select class="form-control" id=" social " required [(ngModel)]="power" name=“social"> <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option> </select> </div> <div class="form-group"> <label for=“married">Married Status</label> <input type=“checkbox” class="form-control" id=“married" [(ngModel)]="married " name=" married "> </div> <div class="form-group"> <label for=“gender">Gender</label> <input type=“radio” class="form-control" id=“gender" [(ngModel)]="gender" name="gender"> Male <input type=“radio” class="form-control" id=“gender" [(ngModel)]="gender" name="gender"> Female </div> https://www.ifourtechnolab.com/

â?&#x2018;Building a Bootstrap Form We make a modal in a separate ts file:User.ts:export class User { name: string; email: string; contact: number; social: string; married: boolean; gender: string; }

https://www.ifourtechnolab.com/

❑Building a Bootstrap Form Then we import this User Modal into Information.component.ts:reset () {

Import {NgForm} from ‘@angular/forms

this.user = new User ();

Import { User } from ‘./ User’;

}

export class InformationComponent {

}

user = new User (); OnSubmit () { this.user.name = form.controls[‘name’].value; this.user. email = form.controls[‘email’].value; this.user.social = form.controls[‘socia’].value; this.user.married= form.controls[‘married’].value; this.user. gender = form.controls[‘gende’].value; } https://www.ifourtechnolab.com/

Types of Forms

❏ Angular provides two different approaches to handling user input through forms: reactive and template-driven.

Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes. ○ Reactive forms are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms. ○ Template-driven forms are useful for adding a simple form to an app, such as an email list signup form.

They're easy to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.

https://www.ifourtechnolab.com/

ngModel

❏ ngModel is required for two way data-binding in template-driven forms i.e, from DOM to Component ❏ For using we ‘ngModel’ we have to register ‘FormsModule’ from @angular/forms in the root module i.e in app.module.ts ❏ Then in our template we use ngModel as shown in this example:-

https://www.ifourtechnolab.com/

Adding Validation Then in Information.component.ts, add validation on submit by the boolean and also put the validation when form is invalid or when user give the wrong inputs.

Import {NgForm} from ‘@angular/forms Import { User } from ‘./ User’; export class InformationComponent { submit = false; user = new User (); OnSubmit (form: NgForm) { submit = true; if(form.invalid) { return; } this.user.name = form.controls[‘name’].value; this.user. email = form.controls[‘email’].value; this.user.social = form.controls[‘socia’].value; this.user.married= form.controls[‘married’].value; this.user. gender = form.controls[‘gende’].value; } https://www.ifourtechnolab.com/

Specific Validation Errors

❏ In Information.component.html, we give validation when user give the wrong entries to the input so theses validations will trigger as errors on such wrong inputs of user.

Like here we put validation on Name & Contact fields. <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"> <div [hidden]=“name.valid || name.pristine” class=“alert-alert-danger”>Name is required</div> </div>

https://www.ifourtechnolab.com/

ngForm ❑ Angular automatically creates & detach ngForm directive to the <form> tag in html. ❑ It controls the form-fields properties with ngModel directive and name attribute and also put validation on fileds by initializing a variable to the form tag.

For eg:<form (ngSubmit)="onSubmit()" #heroForm="ngForm"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name required [(ngModel)]="model.name" name="name”> <div [hidden]="name.valid || name.pristine“ class="alert alert-danger"> Name is required </div> </div>

Contd……

https://www.ifourtechnolab.com/

ngForm <div class="form-group"> <label for=“email">EmailId</label> <input type="text" class="form-control" id=" email " [(ngModel)]="email " name=" email "> </div> <div class="form-group"> <label for=“contact">Contact Number</label> <input type="text" class="form-control" id="contact " [(ngModel)]="contact " name=" contact "> </div> <div class="form-group"> <label for=“social">Social Media</label> <select class="form-control" id=" social " required [(ngModel)]="model.power" name=“social"> <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option> </select> </div>

https://www.ifourtechnolab.com/

ngForm <div class="form-group"> <label for=“married">Married Status</label> <input type=“checkbox” class="form-control" id=“married" [(ngModel)]="married " name=" married "> </div> <div class="form-group"> <label for=“gender">Gender</label> <input type=“radio” class="form-control" id=“gender" [(ngModel)]=" gender " name="gender"> Male <input type=“radio” class="form-control" id=“gender" [(ngModel)]=" gender " name="gender"> Female </div> <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button> <button type="button" class="btn btn-default" (click)="reset()">Reset</button> </form>

https://www.ifourtechnolab.com/

Disabling the Submit button ❑ In forms , we generally disabled the submit button for any wrong input of the user while filling the form. ❑ We can do this by initializing the variable from ngForm in html For eg:-

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">

<div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name required [(ngModel)]="model.name" name="name”> <div [hidden]="name.valid || name.pristine“ class="alert alert-danger"> Name is required </div> </div> <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button> <button type="button" class="btn btn-default" (click)="reset()">Reset</button> </form>

https://www.ifourtechnolab.com/

Thank you

https://www.ifourtechnolab.com/