Sim claro, só uma observação, usando a ferramenta de debug verifiquei que no local do span o angular retornou false para a condição do if:
<!--template bindings={
"ng-reflect-ng-if": "false"
}-->
Código do component:
import { Component } from '@angular/core';
import { FotoComponent } from '../foto/foto.component';
import { Http, Headers } from '@angular/http';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
moduleId: module.id,
selector: 'cadastro',
templateUrl: './cadastro.component.html'
})
export class CadastroComponent {
foto: FotoComponent = new FotoComponent();
http: Http;
meuForm: FormGroup;
constructor(http: Http, fb: FormBuilder){
this.http = http;
this.meuForm = fb.group({
titulo: ["", Validators.required],
url: ["", Validators.required],
descricao: [""]
});
}
cadastrar(event){
event.preventDefault();
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http
.post('v1/fotos', JSON.stringify(this.foto), {headers : headers})
.subscribe( () => {
//Limpar o formulario
this.foto = new FotoComponent();
}, erro => console.log(erro) );
}
}
Template:
<div class="container">
<form [formGroup]="meuForm" class="row" (submit)="cadastrar($event)">
<div class="col-md-6">
<div class="form-group">
<label>Titulo</label>
<input
formControlName="titulo"
name="titulo"
[(ngModel)]="foto.titulo"
class="form-control">
<span *ngIf="meuForm.controls.titulo.invalid" class="form-control alert-danger">
Titulo Obrigatório!
</span>
</div>
<div class="form-group">
<label>URL</label>
<input
formControlName="url"
name="url"
[(ngModel)]="foto.url"
class="form-control">
<span *ngIf="meuForm.controls.url.invalid" class="form-control alert-danger">
URL Obrigatória!
</span>
</div>
<div class="form-group">
<label>Descrição</label>
<textarea formControlName="descricao" name="descricao" [(ngModel)]="foto.descricao" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary" [disabled]="meuForm.invalid">
Salvar
</button>
<a [routerLink]="['']" class="btn btn-primary">Voltar</a>
<hr>
</div>
</form>
</div>