不要觸發表單。$ first首次加載時無效

Question

有這樣的形式

    <div ng-controller="FormController as f_ctrl">
    <form ng-submit="f_ctrl.submit()" name="myForm">
    <input type="text" ng-model="f_ctrl.user.username"
            required
            ng-minlength="4"/>
    <input type="text" ng-model="f_ctrl.user.password"/>
    <input type="submit" value="Submit" ng-disabled="myForm.$invalid">
    </form>
</div>

和這樣的控制器

    .controller('FormController', [function() {
    var self = this;

    self.submit = function() {
        console.log('User submitted form with ' + self.user.username)
    }
}]);

我有一個問題：當頁面第一次加載時，它立即在用戶名字段上顯示紅色邊框，甚至在我開始輸入任何內容之前。 我需要在首次提交后突出顯示無效字段。 這可以使用form.$invalid來完成form.$invalid ？

Answer 1

你必須使用$ pristine。 當表單控制器沒有改變時，這是真的。 因此，當您更改文本框數據時，它會變為錯誤。

小例子給你。

<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
    <input id="passAnime" type="password" name="password" ng-model="user.password" class="form-control input-md" placeholder="Password" tabindex="5" ng-maxlength="25" ng-minlength="6" required>

    <span ng-show="userForm.password.$dirty && userForm.password.$invalid">
        <p ng-show="userForm.password.$error.required" class="error-messages">
             Your password is required.
        </p>
        <p ng-show="userForm.password.$error.minlength" class="error-messages">
            Your password is too short. Minimum 6 chars.
        </p>
        <p ng-show="userForm.password.$error.maxlength" class="error-messages">
            Your password is too long. Maximum 25 chars. 
        </p>
    </span>
</div>

Answer 2

您可以通過添加以下CSS在默認情況下添加紅色邊框的輸入字段上禁用默認樣式：

input:required {
    -moz-box-shadow: none;
    box-shadow: none;
}

然后，如果要在提交表單時突出顯示該字段，則需要確保表單和表單字段具有相關的名稱屬性。 執行此操作將允許您檢查字段是否有效，並在文本字段無效時將類應用於文本字段：

<input type="text" name="username" ng-class="{ 'invalid-field' : f_ctrl.myForm.username.$invalid && !f_ctrl.myForm.username.$pristine }" required />

f_ctrl.myForm和f_ctrl.myform.username將具有其他屬性，您可以使用/檢查這些屬性以確定表單是否無效，或者是否已在任何時候修改它們（例如f_ctrl.myform.username。$ dirty ）。 您應該可以通過添加以下HTML在您的頁面上查看這些屬性：

<div>
    <pre>{{f_ctrl.myForm | json}}</pre>
</div>

或者，您可以從控制器將self.myForm輸出到控制台以查看其屬性

console.log(self.myForm);

Answer 3

Angular有助手告訴你表單（或表單字段）是否為$dirty （用戶輸入了什么內容）或表單是否被$touched （模糊事件已在輸入上觸發）。 看這個演示。

我需要在首次提交后突出顯示無效字段。

不幸的是，Angular不支持這一點。 但你可以自己輕松地實現它：

調節器

function FormController() {
  var vm = this;
  vm.submitAttempted = false;
  vm.submit = function(isValid) {
    if (isValid) {
      // do stuff
    }
    else {
      vm.submitAttempted = true;
    }
  };
}

HTML

<div ng-app='app'>
  <div ng-controller='FormController as vm'>
    <form name='fooForm' ng-submit='vm.submit(fooForm.$valid)' novalidate>
      <label>Username</label>
      <input 
        name='username' 
        type='text' 
        ng-model='vm.user.username'
        required
        ng-minlength='4'
        ng-class="{'invalid': vm.submitAttempted && fooForm.username.$invalid}">
      <br /><br />
      <button type='submit'>Submit</button>
    </form>
  </div>
</div>

CSS

.invalid {
  border-color: red;
}

演示

---

我有一個問題：當頁面第一次加載時，它立即在用戶名字段上顯示紅色邊框，甚至在我開始輸入任何內容之前。

這可能是因為你有以下CSS類：

.ng-invalid {
  border-color: red;
}

Angular將始終將ng-invalid類應用於ng-invalid字段，並且您無法對此進行任何操作。 因此，如果您不總是希望無效字段具有紅色邊框，則不能使用該類，您應該以類似於我上面提出的方式進行操作。

---

另外，請查看ngMessages 。