#angular #forms #templates #disable
Вопрос:
Вот мой код
<form (ngSubmit)="onSubmit()" #f="ngForm">
<input placeholder="Order ID" type="text" id="orderId" class="form-control"
name="orderId" [(ngModel)]="orderId" required>
<button class="btn btn-primary" type="submit" [disabled]="!(f.valid amp;amp; f.dirty)">Search</button>
</form>
Я ожидал, что кнопка будет отключена, если ввод не изменится, но этого не произошло. Кто-нибудь знает, почему?
Ответ №1:
грязный / ! нетронутый означает, что пользователь внес изменение
В вашем случае, если вы введете что-то, а затем вернете его в исходную форму значения, форма все равно останется грязной
Чтобы проверить, есть ли какие-либо различия, вам нужно реализовать свой собственный метод.
Комментарии:
1. Что я хочу сделать, так это предотвратить отправку кратных данных, если входные данные останутся прежними. Я не могу использовать грязное поле?
2. @PaulSerre добавил простую демонстрационную версию, грязный флаг остается верным, как только вы вводите что-то в текстовое поле, а затем возвращаете его в исходное состояние
3. @роберт, вы можете пометить форму как нетронутую при отправке
4. @Eliseo вы правы, в моей обновленной демо-версии есть крошечный метод сравнения исходных значений формы с текущими значениями формы. Своего рода «Существует реальный обмен».
Ответ №2:
Как сказал Роберт, вы можете «поиграть» с нетронутой. например
<form [formGroup]="form">
<input formControlName="control">
<button (click)="submit(form)"
[disabled]="!form.valid || form.pristine">submit</button>
</form>
submit(form)
{
if (form.valid) //if valid mark as "pristine"
{
form.markAsPristine();
console.log("submited") //do something
}
else
form.markAllAsTouched(); //mark all the controls as touched
//to show the errors
}