javascript - AngularJS Material 仅在用户单击字段后才将必填字段变为红色

我有这个标记：

<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转换为红色。

如果用户单击“提交”已禁用按钮，我如何使其变为红色？

最佳答案

欢迎来到角材料限制的世界。看看我创建的code pen demo。如果字段无效或按了提交，则需要在md-input-invalid元素上手动设置css类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>