So validieren Sie Formulare ohne Verwendung der Schaltfläche deaktivieren

Question

Ich versuche, mein Formular zu validieren und ich habe es getan, aber das Problem ist, wenn ich auf die Schaltfläche ohne Eingabe von Eingabewert wird es gespeichert wird und ich möchte nicht die Schaltfläche deaktivieren.I Ich brauche eine Bedingung, dass, wenn ich auf "Senden" klicke, es die Felder anzeigen sollte, die leer sind. Kann jemand bitte Hilfe vorschlagen.

<div class="loginformcss nopadding"> 
    <form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)"> 
     <div class="col_full"> 
     <input type="text" [formControl]="form.controls['firstname']" id="login-form-firstnamee" name="login-form-firstname" value="" placeholder="First Name" class="form-control not-dark"> 
     <span *ngIf="form.controls['firstname'].touched"> 
      <span *ngIf="!form.controls['firstname'].valid" > 
       <p class="error">Field required</p> 
      </span> 
     </span> 
     </div> 

     <div class="clear"></div> 
     <div class="col_full"> 
      <input type="text" [formControl]="form.controls['lastname']" id="login-form-password" name="login-form-password" value="" placeholder="Last Name" class="form-control not-dark"> 
      <span *ngIf="form.controls['lastname'].touched" > 
       <span *ngIf="!form.controls['lastname'].valid" > 
        <p class="error">Field required</p> 
       </span> 
      </span> 
     </div> 

     <div class="clear"></div> 
     <div class="col_full"> 
      <input type="text" [formControl]="form.controls['profilename']" id="login-form-username" name="login-form-username" value="" placeholder="User Name" class="form-control not-dark">      
      <span *ngIf="form.controls['profilename'].touched" > 
       <span *ngIf="!form.controls['profilename'].valid" > 
         <p class="error">Field required</p> 
       </span> 
      </span> 
     </div> 
     <div class="clear"></div> 
     <div class="col_full nobottommargin"> 
      <button class="col-xs-12 button button-small button-3d nomargin" id="login-form-submit" name="login-form-submit" value="login" >Login</button> 
     </div> 
      <div class="clear"></div> 

Answer 1

Der einfachste Weg ist required Attribut zu Ihrem input