1

Buenas en la consola del navegador me aparece estointroducir la descripción de la imagen aquí

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,
    ){}
}

1 respuesta 1

3

Supongo que has cogido el ejemplo de los Template Forms del tutorial de Angular y has intentado generalizar. Si es así, es normal que te equivoques porque el ejemplo no es muy bueno y da pie a equívocos:

<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>

Este primer campo está bien: su nombre es name, por lo que tienes los atributos name="name" y #name="ngModel". Así sale en muchos ejemplo y es la fuente de los errores:

<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>

El campo en este caso se llama surname, por lo que debería ser así:

<p>
    <label>Apellidos</label>
    <input type="text" name="surname" #surname="ngModel" [(ngModel)]="user.surname" class="form-control" required />
    <span *ngIf="!surname.valid && surname.touched"> El Apellido es obligatorio</span>
</p>

Fíjate en el #surname="ngModel", ése es el fallo que tienes: todos los campos se asocian a name

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.