Angular legacy registrer form

registrer.component.html

<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="[email protected]" 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>