Working on angular2 beta Forms
. after alot of searching found nothing useful. hope here somebody help me.
Basically i am bit confused how to use forms in angular2 in a proper manner (i.e using ngControl, ngFormControl etc). i have created one plnkr here
http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview
here is my .html code:-
<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">
<div class="col-md-7">
Name: <input type="text" id="name" placeholder="Name" class="form-control" ngControl="name">
</div>
<div class="col-md-7">
Password: <input type="text" id="password" placeholder="password" class="form-control" ngControl="password">
</div>
<div class="col-md-7">
<input type="radio" name='type'>Btech
<input type="radio" name='type'>Mtech
</div>
<div class="col-md-7">
<input type="checkbox" >Math
<input type="checkbox">English
<input type="checkbox">Science
</div>
<br>
<div class="col-md-7">
<select #selectOption (change)='getValue(selectOption.value)' class='form-control'>
<option value='1'>One Value</option>
<option value='2'>two Value</option>
<option value='3'>Three Value</option>
</select>
</div>
</form>
<button type="button" (click)="addNewGroup(CreateGroup.value)" class="btn btn-primary btn-lg"> Create </button>
and .ts code is here:-
CreateGroup: FormBuilder;
constructor(fb: FormBuilder){
console.log('form called');
this.CreateGroup = fb.group({
'name': new Control(),
'password': new Control()
})
}
addNewGroup(value) {
console.log(value);
document.getElementById("myForm").reset();
}
getValue(value){
console.log(value);
}
i am unable to understand how to get values as object from complete form. my form include textboxes,checkboxes,radio and select options. now here are few of my questions.
Q1:- How to get values of radio,checkbox,select using form in angular2. (i dont want to call change
hook for select option as i have used in the plnkr).
Q2:- as in the plnkr after submitting data form control has not been reset. Control of the form remains present but form seems reset. so how to reset the control of forms in angular2.
Q3:- whats the best method to use validation in the forms (if anyone have plnkr showing validation please post it).
i had read this article on forms but still not succesfull with radio checkboxes and select options.
http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2
A base class that all FormControl -based directives extend. It binds a FormControl object to a DOM element.
Angular supports two design approaches for interactive forms. You can build forms by using Angular template syntax and directives to write templates with the form-specific directives.
Template driven forms are forms where we write logic, validations, controls etc, in the template part of the code (html code). The template is responsible for setting up the form, the validation, control, group etc.
Initialize the domain model within your component:
constructor(){
this.student = new Student();
}
Use ngModel
to bind to the form controls to a domain model with two-way model binding.
Name: <input [(ngModel)]="student.name" type="text">
Password: <input [(ngModel)]="student.password" type="text">
When the button is clicked, pass the domain model as an argument:
<button type="button" (click)="addNewGroup(student)">Create</button>
Implement the addNewGroup
method. To reset the form, update the domain model with a new model:
addNewGroup(student:Student) {
alert('added ' + student.name);
this.student = new Student();
}
Demo Plnkr
To add form validation, add ngFormModel
to the form element and add ngControl
decorators to each input element (ngControl
is syntactic sugar for [ngFormControl]="studentForm.controls['name']"
):
<form [ngFormModel]="studentForm" />
<input type="text" ngControl="name" />
<input type="text" ngControl="password" />
</form>
The ngFormModel
maps to a ControlGroup
property of your component. Initialize the ControlGroup
with a configuration object whose property names correspond to the values from the ngControl
attributes:
constructor(fb: FormBuilder){
this.student = new Student();
this.studentForm = fb.group({
'name': new Control(this.student.name, Validators.required),
'password': new Control(this.student.password, Validators.required)
});
}
In the above example, the built-in required
validator is used to indicate that name and password are required fields. You can then check whether the entire form is valid using the valid
property on the form model:
addNewGroup(student:Student) {
if (this.studentForm.valid) {
alert('added ' + student.name);
this.student = new Student();
}
else {
alert('form is not valid!');
}
}
Demo Plnkr
If you want to bind to validation messages in the view, you can export the Control as a local template variable and access it's validation properties: valid, dirty, pending, pristine, and the errors object.
<input ngControl="name" #name="ngForm" type="text">
<span [hidden]="name.valid"><b>Required</b></span>
Demo Plnkr
If you want to create your own custom validator, create a method that returns a validation object whose boolean
properties correspond to validation errors. For example, you can create a validator that ensures that the first letter of a password must be numeric:
interface ValidationResult {
[key:string]:boolean;
}
class PasswordValidator {
static startsWithNumber(control: Control): ValidationResult {
if ( control.value && control.value.length > 0){
if (isNaN(control.value[0]))
return { 'startsWithNumber': true };
}
return null;
}
}
Compose validators together into one validator and pass it to the Control
constructor using the built-in Validators.compose
:
this.studentForm = fb.group({
'name': new Control(this.student.name, Validators.required),
'password': new Control(this.student.password, Validators.compose([Validators.required,PasswordValidator.startsWithNumber])),
});
If you have multiple validators on the same Control
, use the errors
object to distinguish between them:
<input ngControl="password" #password="ngForm" />
<span [hidden]="!password.control.hasError('required')"><b>Required</b></span>
<span [hidden]="!password.control.hasError('startsWithNumber')"><b>Must start with number</b></span>
Demo Plnkr
In Angular2, there is no built-in support yet to bind to radio button lists. Check this post to find out how to do this:
Angular2 - Radio Button Binding
TL;DR;
After the release of angular2 RC Forms there are lot of changes have been made in angular2 forms. there are some of them are major breaking changes some of them are negligible, here are some key points for using angular2 forms.
Basically there are two ways to build forms in Angular 2, namely template-driven and model-driven. basic structure for using forms are as follows:-
npm install @angular/forms --save
configure bootstrap method for your app as following:
bootstrap(AppComponent, [
disableDeprecatedForms(), // disable deprecated forms
provideForms(), // enable new forms module
]);
use REACTIVE_FORM_DIRECTIVES
to component directives to use forms functionality.
FormGroup
Validators
for validatiion purpose.apart from this FormBuilder is not a mandatory to building model driven form, but it simplify the syntax. there are three basic syntax/method provided by formbuilder are:
These are the basic steps to use forms in angular2 RC.
Usefull resources for angular2 forms:
https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol
https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2
Live Demo for the same here
Working Demo for angular2 Forms
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With