只有在用户单击字段后，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();
}

如果用户点击该字段，I txt 会变为红色，然后退出且未填写。

但是，用户未点击的字段不会将其 txt 变为红色。

如果用户点击“提交”禁用按钮，我怎样才能让它们变成红色？

Answer 1

欢迎来到角材料限制的世界。看看我创建的这个code pen demo。您需要手动设置 css 类 md-input-invalid，在 md-input-container 元素上，如果该字段无效 + 按下了提交。

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