Настройка класса ошибок Bootstrap через AngularJS при отправке формы?

Question

Как я могу эффективно установить состояние ошибки из нескольких полей формы после пользователь отправляет форму?

Я могу установить состояние ошибки достаточно легко на постоянной основе. Как описано в this thread я использую следующий HTML-код:

<div class="control-group" ng-class="{ error: groupForm.textbox_Group.$invalid }"> 
    <label class="control-label" for="textbox_Group"><i class="icon-home"></i> Organization</label> 
    <div class="controls controls-row"> 
    <input type="text" class="span6" id="textbox_Group" name="textbox_Group" placeholder="Organization" ng-model="org" required> 
    </div> 
</div> 

Моя проблема с этим является то, что он появится в состоянии ошибки непосредственно на странице загрузки. Я хочу, чтобы он казался нормальным до того, как пользователь попал в submit, а затем, только если он отмечен $invalid.

настоящее время я использую индивидуальные флаги, вдоль линий:

<div class="control-group" ng-class="{ error: group.isInvalid }"> 
    <!-- snip --> 
</div> 

<div class="control-group" ng-class="{ error: date.isInvalid }"> 
    <!-- snip --> 
</div> 

Он работает, но, кажется, очень раздутый мне. Есть ли более упорядоченный способ пометить все поля формы в состоянии $invalid, но только после отправки этой формы?

Answer 1

Вы можете создать переменную области видимости, которая по умолчанию равна false, которая отслеживает при нажатии кнопки.

$scope.formSubmitted = false 

В вашей форме добавьте директиву ng-submit, чтобы изменить условие на true.

<form name='myForm' ng-submit="formSubmitted=true" > 

Теперь измените состояние класса нг:

ng-class="{ error: date.isInvalid && formSubmitted }"