Góc, hình thức vật chất chỉ nói trường là bắt buộc sau khi gửi thử

Question

Tôi là một hình thức đăng nhập ứng dụng của tôi với tài liệu góc và đang cố gắng sử dụng nó hơi khác so với ví dụ trên trang của họ. Tôi chỉ muốn các trường bắt buộc chỉ hét lên với tôi nếu người dùng cố gắng gửi mà không điền vào một trường. Có thể vô hiệu hóa nút quá? Bất kể, nếu người dùng chỉ điền vào một trường và nhấn enter, tôi muốn nó hiển thị rằng "điều này là bắt buộc". Ngay bây giờ nó chỉ cho thấy tất cả thời gian cho đến khi bạn điền vào nó ra

Dưới đây là những gì tôi có: https://jsfiddle.net/5b1tsm2a/6/

tôi đang cố gắng mã từ trang ví dụ của họ như vậy -

<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> 

Vì vậy, tôi đang sử dụng logic bắt buộc với các thông điệp ng bên dưới nó. Tôi sẽ chỉ như vậy để cho thấy nếu họ đã cố gắng để gửi mà không cần điền bất cứ điều gì. Cảm ơn!

Answer 1

Cập nhật mã của bạn như sau:

<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>