無効ボタンを使用せずにフォームを検証する方法

Question

私は自分のフォームを検証しようとしていますが、問題は、入力値を入力せずにボタンをクリックすると保存され、ボタンを無効にしたくないということです。私が送信をクリックすると、空であるフィールドのエラーが表示されるはずです。誰でも助けてください。

<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

最も簡単な方法は、私は私のcolumsのすべてのために、それは最初の列のためにのみ示したことを行うと、あなたのinput