Scribd
Upload
14 views1 page

Lab Assignment Angular Form Validation

The document outlines a lab assignment for creating a template-driven form in Angular to collect customer information using the directives NgForm and ngModel. NgForm is used to create a form object, while ngModel facilitates data binding and validation of HTML elements. The provided code snippet demonstrates the implementation of a simple form with fields for name, address, phone, and email, along with a submit button that is disabled if the form is invalid.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views1 page

Lab Assignment Angular Form Validation

The document outlines a lab assignment for creating a template-driven form in Angular to collect customer information using the directives NgForm and ngModel. NgForm is used to create a form object, while ngModel facilitates data binding and validation of HTML elements. The provided code snippet demonstrates the implementation of a simple form with fields for name, address, phone, and email, along with a submit button that is disabled if the form is invalid.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Lab Assignment : Angular Template driven form

Create template driven form to accept customer information:


Two Important Directives for form building:

• NgForm • ngModel
ngForm: It plays a great role in form building, this angular directive concrete values of all HTML
elements of form.
We can say that by using this directive we are capable to create form object.
NgModel: This directive has used no binding, one-way and two-way data binding.
It is responsible to hold values of HTML elements.
It is also used to validate HTML elements values.

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<h2>Simple Form</h2>
<form #f="ngForm" (ngSubmit)="addCustomer(f.value)">
<input type='text' name='name' ngModel required />
<input type='text' name='address' ngModel required />
<input type='text' name='phone' ngModel required />
<input type='text' name='email' ngModel required />

<input type='submit' [disabled]="f.invalid" value='click here' />


<span> {{ fname }}</span>
<span> {{ lname }}</span>
</form>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
fname="";
lname="";
addEmployee(form: any): void{
console.log(form);
this.fname = form.fname;
this.lname = form.lname;
}
}

You might also like