javascript - 仅当用户单击某个字段后，AngularJS Material 才会将必填字段变为红色

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 会变成红色。

但是，用户未点击的字段不会将其文本变成红色。

如果用户单击“提交”禁用按钮，如何将它们设为红色？

Answer 1

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

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