Угловая, только форма материала поле обязательное для заполнения после отправки запроса

Question

Я создаю форму входа в систему с угловым материалом и стараюсь использовать ее немного иначе, чем примеры на их странице. Я просто хочу, чтобы требуемые поля только кричали на меня, если пользователь пытается подать без заполнения поля. Может быть, отключить кнопку тоже? Независимо от того, если пользователь заполняет только одно поле и нажимает enter, я бы хотел, чтобы он показывал, что «это требуется». Сейчас это просто показывает, что он все время, пока вы не заполните его

Вот что у меня есть: https://jsfiddle.net/5b1tsm2a/6/

Я пытаюсь код из их примера страницы, как так -

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

Я используя логику с ng-сообщениями ниже нее. Мне хотелось бы только показать, пытались ли они подать, не заполняя ничего. Благодаря!

Answer 1

Обновить код, как показано ниже:

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