Resulta que tengo un componente para dar de alta articulos en angular2. Cuando creo el componente vacío, las validaciones se realizan correctamente. Ahora bien, cuando al mismo componente lo utilizo para editar un articulo e inicializo el form con datos, este no se valida. Que puede estar pasando?.
Les pongo los sources... article-form.component.ts
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DropdownModule, ModalDirective } from 'ng2-bootstrap';
import { ToasterContainerComponent, ToasterService } from 'angular2-toaster';
import { WSRESTArticle } from '../../../../services/article.services';
import { ArticleVO } from '../../../../services/ArticleVO';
@Component({
selector: 'article',
providers: [ToasterService],
template: require('./article-form.html'),
encapsulation: ViewEncapsulation.None
})
export class ArticleFormComponent implements OnInit {
@ViewChild('childModal') childModal: ModalDirective;
private toasterService: ToasterService;
public trxForm;
title : string;
caption: string;
add: boolean;
idarticle: number;
states = [{"id": 1, "state": 'Habilitado'}, {"id": 0, "state": 'Inhabilitado'}];
constructor(public fb: FormBuilder,
private router: Router,
private route: ActivatedRoute,
protected serviceArticle: WSRESTArticle,
toasterService: ToasterService) {
console.log('Article-Form constructor');
this.toasterService = toasterService;
this.trxForm =this.fb.group({
description: ["", [Validators.required]],
price: ["", [Validators.required, Validators.pattern('^[0-9]+(\.[0-9]{1,2})?$')]],
flagenabled: ["", [Validators.required]]
});
}
ngOnInit() {
var id = this.route.params.subscribe(params => {
var id = params['id'];
this.title = id ? 'Editar Artículo' : 'Agregar Nuevo Artículo';
this.caption = id ? 'Confirmar cambios' : 'Confirmar alta';
this.add = id ? false : true;
if (!id)
return;
this.idarticle = id;
this.serviceArticle.Get(this.idarticle)
.subscribe((data:ArticleVO) => this.fillArticleForm(data),
error => console.log(error),
() => console.log('Get article complete'));
});
}
doCleanPrepare(): void {
this.trxForm.reset();
}
goBack(): void {
this.router.navigate(['pages/articles']);
}
doPost(): void {
if (!this.idarticle)
{
this.serviceArticle
.Add(this.trxForm.value.description, this.trxForm.value.price, this.trxForm.value.flagenabled.id)
.subscribe((data:string) => {
console.log(data);
this.toasterService.pop('success', 'Agregar Artículo', 'Artículo insertado correctamente!.');
},
error => {
console.log(error);
this.toasterService.pop('error', 'Agregar Artículo', 'Error - El Artículo no puedo ser agregado!.');
},
() => console.log('insertar article finalizado'));
}
else {
let article = new ArticleVO();
article.description = this.trxForm.value.description;
article.price = this.trxForm.value.price;
article.flagenabled = this.trxForm.value.flagenabled.id;
this.serviceArticle
.Update(this.idarticle, article)
.subscribe((data:ArticleVO) => {
console.log(data);
this.toasterService.pop('success', 'Editar Artículo', 'Artículo actualizado correctamente!.');
},
error => {
console.log(error);
this.toasterService.pop('error', 'Editar Artículo', 'Error - El Artículo no puedo ser actualizado!.');
},
() => console.log('actualizar article finalizado'));
}
}
private fillArticleForm(data:ArticleVO): void {
this.trxForm = this.fb.group({
description: data.description,
price: data.price,
flagenabled: this.states.find(myobj => myobj.id == data.flagenabled)
});
}
}
article-form.html
<div class="widgets">
<toaster-container></toaster-container>
<div class="row">
<button class="btn btn-success col-lg-1" (click)="goBack()">Regresar</button>
<h3 class="col-lg-11">{{title}}</h3>
</div>
</div>
<br>
<div class="row">
<form [formGroup]="trxForm">
<div class="form-group" [ngClass]="{'has-error':!trxForm.controls['description'].valid && trxForm.controls['description'].touched}">
<label for="description">Descripción</label>
<input formControlName="description" type="text" class="form-control" id="description" placeholder="Descripción">
<div *ngIf="!trxForm.controls['description'].valid && trxForm.controls['description'].touched">
<p *ngIf="trxForm.controls['description'].hasError('required')" class="alert alert-danger">* El campo Descripción es obligatorio</p>
</div>
</div>
<div class="form-group" [ngClass]="{'has-error':!trxForm.controls['price'].valid && trxForm.controls['price'].touched}">
<label for="price">Precio</label>
<input formControlName="price" type="text" class="form-control" id="price" placeholder="Precio">
<div *ngIf="!trxForm.controls['price'].valid && trxForm.controls['price'].touched">
<p *ngIf="trxForm.controls['price'].hasError('required')" class="alert alert-danger">* El campo Precio es obligatorio</p>
<p *ngIf="trxForm.controls['price'].hasError('pattern')" class="alert alert-danger">* El campo Precio debe ser numérico</p>
</div>
</div>
<div class="form-group" [ngClass]="{'has-error':!trxForm.controls['flagenabled'].valid && trxForm.controls['flagenabled'].touched}">
<label for="flagenabled">Habilitado</label>
<select formControlName="flagenabled" name="flagenabled" class="form-control">
<option [ngValue]="i" *ngFor="let i of states" >{{i.state}}</option>
</select>
<div *ngIf="!trxForm.controls['flagenabled'].valid && trxForm.controls['flagenabled'].touched">
<p *ngIf="trxForm.controls['flagenabled'].hasError('required')" class="alert alert-danger">* El campo Habilitado es obligatorio</p>
</div>
</div>
<button class="btn btn-danger" [disabled]="!trxForm.valid" (click)="doPost()">{{caption}}</button>
<button class="btn btn-success" [hidden]="!add" (click)="doCleanPrepare()">Limpiar y Preparar Nuevo</button>
</form>
</div>
<br>