在帶有ng-messages的angularjs材料md-input-container中顯示服務器端驗證消息

Question

我有一些在md-input-container中的輸入形式。 每個輸入都有一些帶有ng-messages指令的驗證消息：

<form name="ctrl.myForm" layout="column" ng-submit="addUser(model)">

    <input hide type="submit" />
    <div layout="column" layout-padding>

        <md-input-container> 
            <label translate>Username</label>
            <input name="username" ng-model="model.username" type="text" required>
            <div ng-messages="ctrl.myForm.username.$error">
                <div ng-message="required" translate>This field is required.</div>
                <div ng-message="unique" translate>Username is used before.</div>
            </div>
        </md-input-container>

        <md-input-container> 
            <label translate>Email</label>
            <input name="email" ng-model="model.email" required>
            <div ng-messages="ctrl.myForm.email.$error">
                <div ng-message="required" translate>This field is required.</div>
                <div ng-message="email" translate>Email is not valid.</div>
            </div>
        </md-input-container>

    </div>

    <div layout="row">
        <span flex></span>
        <md-button 
            class="md-raised"
            ng-click="cancel()">
            <wb-icon>close</wb-icon>
            <span translate>Cancel</span>
        </md-button>
        <md-button 
            class="md-raised"
            ng-click="addUser(model)">
            <wb-icon>done</wb-icon>
            <span translate>Add</span>
        </md-button>
    </div>

</form>

在我的控制器中，我有一個名為addUser（model）的函數，該函數將給定數據發送到服務器並接收一些驗證代碼。 我在$ error對象中設置了適當的鍵，但未顯示相關消息。 如果從服務器收到錯誤，我將密鑰設置如下：

function addUser(model){
    $myService.newUser(model)//
    .then(function(user) {
        // user is created successfully.
    }, function(error) {
        ctrl.myForm.$invalid = true;
        ctrl.myForm.username.$error['unique'] = true;
        ctrl.myForm.email.$error['email'] = true;
    });
}

我希望當我將鍵設置為true時，相關消息會顯示在表單中，但消息不會顯示。 此時，如果我更改與該字段相關的消息的值，則會顯示該字段！ 我找不到問題。

Answer 1

在這里閱讀有關$asyncValidators https://docs.angularjs.org/guide/forms ，也有一些示例。 （ ctrl.$asyncValidators.username=...等）

簡而言之：

Angularjs內置驗證要求您編寫和添加驗證器。 您不應手動控制$invalid, $error字段（這就是為什么它們具有$前綴）的原因。 Angularjs材料也遵循這種方法。

PS為何類似ctrl.myForm.$invalid = true; 不會始終如一地工作非常簡單-angularjs下一次驗證運行會將其設置為false