Kątowa, materiałowa forma mówi tylko, że pole jest wymagane po próbie przesłania

Question

Ja buduję mój formularz logowania do aplikacji z materiałem kątowym i próbuję użyć go nieco inaczej niż przykłady na ich stronie. Chcę tylko, aby wymagane pola tylko krzyczały na mnie, jeśli użytkownik spróbuje przesłać, nie wypełniając pola. Może wyłączyć również przycisk? Niezależnie od tego, jeśli użytkownik wypełni tylko jedno pole i naciśnie klawisz enter, chciałbym pokazać, że "jest to wymagane". Teraz to tylko pokazuje go przez cały czas, aż go wypełnić

Oto co mam: https://jsfiddle.net/5b1tsm2a/6/

Staram kod z ich przykładem strony jak tak -

<form ng-submit="authenticate()" name="loginForm"> 
     <md-input-container> 
      <label>Username</label> 
      <input name="name" reauired ng-model="loginInfo.username"> 
      <div ng-messages="projectForm.description.$error"> 
       <div ng-message="required">This is required.</div> 
      </div> 
     </md-input-container> 

     <md-input-container> 
      <label>Password</label> 
      <input name="password" reauired type="password" ng-model="loginInfo.password"> 
      <div ng-messages="projectForm.description.$error"> 
       <div ng-message="required">This is required.</div> 
      </div> 
     </md-input-container> 

     <md-button ng-click="authenticate()" class="md-primary btn btn-primary">Login</md-button> 
    </form> 

Więc "Używam wymaganej logiki z ng-wiadomościami pod nią. Chciałbym tylko, żeby pokazać, czy próbowali się poddać, nie wypełniając niczego. Dzięki!

Answer 1

zaktualizuj kod jak poniżej:

<form ng-submit="authenticate()" name="loginForm"> 
     <md-input-container> 
      <label>Username</label> 
      <input name="username" ng-model="loginInfo.username" required/> 
      <div ng-messages="loginForm.username.$error" ng-if='loginForm.username.$dirty'> 
       <div ng-message="required">This is required.</div> 
      </div> 
     </md-input-container> 

     <md-input-container> 
      <label>Password</label> 
      <input name="password" type="password" ng-model="loginInfo.password" required/> 
      <div ng-messages="loginForm.password.$error" ng-if='loginForm.password.$dirty'> 
       <div ng-message="required">This is required.</div> 
      </div> 
     </md-input-container> 
     <md-button type="submit" class="md-primary btn btn-primary">Login</md-button> 
</form>