Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular legacy registrer form
<section id="contact">
<div class="section-contact">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<h2><span class="bold-orange">Registrate</span></h2>
<form #registerForm="ngForm" (ngSubmit)="onSubmit()" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Usuario</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="usuario" #usuario="ngModel" [(ngModel)]="user.usuario" placeholder="practico pero tambien guapo..." required >
<span class="notification animated fadeIn low" *ngIf="!usuario.valid && usuario.touched">
el campo es obligatorio
</span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Correo_electronico</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="correo_electronico" #correo_electronico="ngModel"
[(ngModel)]="user.correo_electronico" placeholder="ejemplo@domain.com" value="" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<span class="notification animated fadeIn low" *ngIf="!correo_electronico.valid && correo_electronico.touched">
el correo electronico es obligatorio
</span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Contraseña</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="contrasenia" #contrasenia="ngModel"
[(ngModel)]="user.contrasenia" value="" required pattern="[a-z0-9._%+-]{8,64}$">
<span class="notification animated fadeIn low" *ngIf="!contrasenia.valid && contrasenia.touched">
el campo es obligatorio
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Registrarse!" class="btn btn-success" [disabled]="!registerForm.form.valid" >
</div>
</div>
<div class="alert alert-success" *ngIf="status =='success'"> Registro exitoso!
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment