AngularJS材料轮番需要红色的字段用户点击一个字段

Question

我有这个标记后，才：

<md-input-container class="md-block" flex-gt-sm ng-show="$ctrl.isAddMode"> 
    <label>ID</label> 
    <input name="id" ng-model="$ctrl.voice.id" 
      ng-model-options="{ debounce: 1000 }" 
      ng-change="$ctrl.verifyUniqueId()" required> 
    <div class='error' ng-show='$ctrl.idError'> 
     {{$ctrl.idError}} 
    </div> 
</md-input-container> 
<md-input-container class="md-block" flex-gt-sm> 
    <label>Name</label> 
    <input ng-model="$ctrl.voice.name" required> 
</md-input-container> 

和

<md-button ng-disabled="!$ctrl.isReadyForSubmit()" 
      class="md-raised md-primary" 
      ng-click="$ctrl.submit()"> 
    {{$ctrl.voice.isTest ? "Start Test" : "Publish"}} 
</md-button> 

有：

self.isReadyForSubmit = function() { 
    return $scope.voiceForm.$valid && !uploadService.getClientErrorMsgOfUploadedFiles(); 
} 

我的txt变为红色，如果用户点击该字段，出去并不填充它。

但不是由用户点击不自己TXT变成红色字段。

如果用户点击“提交”禁用按钮，我该如何使它们变为红色？

Answer 1

欢迎来到角材料限制的世界。看看我创建的code pen demo。您需要手动设置css类md-input-invalid，在md-input-container元素上，如果该字段不是valide + submit被按下。

<form name="projectForm"> 
    <md-input-container class="md-block" ng-class="{ 'md-input-invalid': projectForm.description.$invalid && wasSend }"> 
     <label>Description</label> 
     <input md-maxlength="30" required md-no-asterisk="" name="description" ng-model="project.description"> 
     <div ng-messages="projectForm.description.$error"> 
      <div ng-message="required">This is required.</div> 
      <div ng-message="md-maxlength">The description must be less than 30 characters long.</div> 
     </div> 
    </md-input-container> 

    <div layout="row"> 
     <md-input-container flex="50" ng-class="{ 'md-input-invalid': projectForm.clientName.$invalid && wasSend }"> 
      <label>Client Name*</label> 
      <input name="clientName" required ng-model="project.clientName"> 
      <div ng-messages="projectForm.clientName.$error"> 
       <div ng-message="required">This is required.</div> 
      </div> 
     </md-input-container> 
    <div> 
     <md-button type="submit" ng-click="wasSend = true">Submit</md-button> 
    </div> 
</form>