Угловая форма проверки и нетронутые формы

Question

Я создаю форму «добавить нового пользователя»/«редактировать существующего пользователя». Если страница загружается и есть данные в formData, я, очевидно, редактирую существующего пользователя, и она заполняет поля, если это необходимо.

Если страница загружается без данных в formData, то это, очевидно, новый пользователь. Если это новый пользователь, поля должны быть пустыми , но они не должны показывать обратную связь.

Я подумал, что это то, ради чего был $ первозданный. В моем примере это выглядит, моя попытка заполнить поля вызывает $ pristine = false.

Как разместить оба сценария?

Мой плункер немного базовый. iN мое приложение, я запустил форму со страницы, в которой перечислены все пользователи (щелкните пользователя для редактирования), а также кнопка «Добавить пользователя». Это означает, что я могу загрузить страницу с или без формы, заполненной по мере необходимости.

http://plnkr.co/edit/WH9VQmleVQM2ELBREIYU?p=preview

Интересно, если у него есть что-то сделать с помощью двусторонней привязки к модели?

ng-model="formData.username" 
    value="{{formData.username || ''}}" 

Answer 1

Они показывают обратную связь об ошибке, потому что в вашем стиле CSS вы определили input.ng-инвалида, это верно независимо от того, если это нетронутые или нет. Следующее должно решить вашу проблему:

input.ng-invalid.ng-dirty { 
    border: 1px solid #a94442; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); 
}