Angular 2 - Forms - Template driven

Sep 7, 2015 9:00:00 AM / by daniel.comas

 

Hoy vamos a hacer un ejercicio simple con Angular 2 sobre formularios. En Angular 2 existen varias formas de hacer formularios, hoy vamos a ver el conocído como template driven el que es usado en la versión 1.X

 

Angular 1.X 

<div ng-controller="ExampleController">
<form name="form">
Name:
<input type="text" ng-model="user.name" name="uName" required="" aria-required="true" class="error"><label id="uName-error" class="error" for="uName">This field is required.</label>
<br>
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>
<input type="submit" ng-click="update(user)" value="Save">
</form>
</div>

 

Angular 2 

Un ejemplo parecído con Angular 2 podría ser el siguiente: 

<form (ng-submit)="onSubmit(f)" #f="form" name="form">
<img [src]="data.avatar_url ? data.avatar_url : ''" width="100" height="100"/>
<div class="form-group" [class.has-error]="!f.controls?.name?.valid">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" ng-control="name" placeholder="name" [(ng-model)]="data.name" required>
<show-error control="name" [errors]="['required']"></show-error>
</div>
<input type="submit" class="btn btn-primary"/>
</form>

 

Se ha creado una directiva show-error que es la que mostrará los textos de los errores algo parecído a hacer un include con ng-messages.

 

Vamos a ver un ejemplo completo en el que le añadiremos algo más de lógica y presentación: 

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, NgIf} from 'angular2/angular2';
import {FORM_DIRECTIVES, NgForm} from 'angular2/forms';
import {HTTP_BINDINGS, Http} from 'http/http';
import {Inject} from 'angular2/di';
import {isPresent} from 'angular2/src/facade/lang';

@Component({selector: 'show-error', properties: ['controlPath: control', 'errorTypes: errors']})
@View({
template: `
<span *ng-if="errorMessage !== null"></span>
`,
directives: [NgIf]
})
class ShowError {
formDir;
controlPath: string;
errorTypes: List<string>;

constructor(@Inject(NgForm) formDir: NgForm) { this.formDir = formDir; }

get errorMessage() {
var c = this.formDir.form.find(this.controlPath);
for (var i = 0; i < this.errorTypes.length; ++i) {
if (isPresent(c) && c.touched && c.hasError(this.errorTypes[i])) {
return this._errorMessage(this.errorTypes[i]);
}
}
return null;
}

_errorMessage(code) {
var config = {'required': 'is required'};
return config[code];
}
}

// Annotation section
@Component({
selector: 'my-app',
viewBindings: [HTTP_BINDINGS]
})
@View({
template:
`<form (ng-submit)="onSubmit(f)" #f="form" name="form">
<img [src]="data.avatar_url ? data.avatar_url : ''" width="100" height="100"/>
<div class="form-group" [class.has-error]="!f.controls?.name?.valid">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" ng-control="name" placeholder="name" [(ng-model)]="data.name" required>
<show-error control="name" [errors]="['required']"></show-error>
</div>
<div class="form-group">
<label for="company">Company</label>
<input type="text" class="form-control" id="company" placeholder="company" [(ng-model)]="data.company">
</div>
<div class="form-group">
<label>Location:</label><span></span>
</div>
<div class="form-group">
<label>Blog:</label><a [href]="data.blog"></a>
</div>
<input type="submit" class="btn btn-primary"/>
</form>`,
directives: [FORM_DIRECTIVES, ShowError, NgIf]
})

// Component controller
class MyAppComponent {
data: Object;
constructor(@Inject(Http) http:Http) {
this.data = {};
http.get('https://api.github.com/users/danicomas').toRx().map(res => res.json()).subscribe(response => this.data = response);
}

onSubmit(f) {
console.log(f);
console.log(f.controls.name.valid);
console.log(this.data);
}
}

bootstrap(MyAppComponent);

 

El ejemplo mostrará lo siguiente: 

 

 

 

Con este tipo de creación de formularios vamos añadiendo las validaciones en él (requireds, custom validators, ...). En próximos artículos os enseñaremos otra forma de hacer dónde podremos añadir cierto código que tenemos en los templates en los javascripts.

 

 

 

Topics: AngularJS, Forms, Ingens Developments, JavaScript, Programación, Template Driven, TypeScript

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas