使用AngularJS顯示表單驗證錯誤

Question

這是我當前的html代碼：

<div class="form-group" ng-class="{ 'has-error' : form.inputName.$invalid && !form.inputName.$pristine }">
    <label for="inputName" class="col-sm-4 control-label"><font color='RED'>* </font>Name</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" ng-model="name" name="inputName" id="inputName" placeholder="Enter in a name." required />
        <p ng-show="form.form.$invalid && !form.form.$pristine" class="help-block">Name is required.</p>
    </div>
</div>

現在，這對於在任何情況下都是必需的字段都適用。

但是，假設用戶可以選擇“發型”之類的標簽，並且必須描述顏色字段和長度字段。 如果這些字段為空白，則顯示一條小消息（例如ng-show）。 因此，根據用戶選擇的選項卡，如果未輸入該選項卡的正確信息，則用戶應該會看到錯誤。 我將如何使用角度顯示呢？

例如。 控制器代碼...

$scope.someButtonPressed = function() {
    if ($scope.color == "") {
        // display ng-show for color
        // input field should have a red border to it
    }
}

這是我從以下位置獲得html錯誤驗證代碼的地方： http : //codepen.io/sevilayha/pen/xFcdI

Answer 1

您應該參考https://scotch.io/tutorials/angularjs-form-validation ，其中包含詳細說明和示例。

另外這個文檔必須閱讀！

如果要為必填字段設置邊框顏色，請參考此內容 。 您可以對ng-required字段使用ng-invalid類