只有在用户单击字段后，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。您需要在md-input-invalid元素上手动设置css类md-input-container，如果字段不是valide +按下了提交。

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