Buenas en la consola del navegador me aparece esto
y mi codigo en Angular es el siguiente
<div class="container">
<h1>{{title}}</h1>
<div class="row">
<div class="col-lg-6">
<form #registerForm="ngForm" class="col-lg-10">
<p>
<label for="name">Nombre</label>
<input type="text" name="name" #name="ngModel" [(ngModel)]="user.name" class="form-control"
required />
<span *ngIf="!name.valid && name.touched"> El nombre es obligatorio</span>
</p>
<p>
<label>Apellidos</label>
<input type="text" name="surname" #name="ngModel" [(ngModel)]="user.surname" class="form-control"
required />
<span *ngIf="!surname.valid && surname.touched"> El Apellido es obligatorio</span>
</p>
<p>
<label for="nick">Nick</label>
<input type="text" name="nick" #name="ngModel" [(ngModel)]="user.nick" class="form-control"
required />
<span *ngIf="!nick.valid && nick.touched"> El nick es obligatorio</span>
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" #name="ngModel" [(ngModel)]="user.email" class="form-control"
required pattern="/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/" />
<span *ngIf="!email.valid && email.touched"> El email es obligatorio</span>
</p>
<p>
<label for="password">Contraseña</label>
<input type="password" name="password" #name="ngModel" [(ngModel)]="user.password" class="form-control"
required />
<span *ngIf="!password.valid && password.touched"> El password es obligatorio</span>
</p>
<input type="submit" value="{{title}}" class="btn btn-success" [disabled]="!registerFrom.form.valid" />
</form>
</div>
</div>
</div>
Tengo un componente donde cargo el usuario
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { User } from '../../models/user';
@Component({
selector: 'register',
templateUrl: './register.component.html'
})
export class RegisterComponent implements OnInit {
title: string;
user: User;
constructor(
private _route: ActivatedRoute,
private _router: Router
) {
this.title = "Registrate";
this.user = new User("","","","","","","","");
}
ngOnInit() {
console.log('Componente del Registro cargado...');
}
}
Y este es el modelo del usuario
export class User{
constructor(
id:string,
name:string,
surname:string,
nick:string,
email:string,
password:string,
role:string,
image:string,
){}
}