Как проверить «грязный» или «нетронутый» в модальной форме Angular 5?

#javascript #jquery #angular #angular6 #angular5

#javascript #jquery #angular #angular6 #angular5

Вопрос:

Я работаю в модальной форме. Я хочу отправить форму, только если в поле формы внесены какие-либо изменения. Моя форма выглядит следующим образом:

HTML

 <form [formGroup]="productForm" *ngIf="productForm"
(ngSubmit)="submitUpdatedRecord(productForm.value)">

    <input
    type="text" 
    class="form-control" 
    formControlName="product_code" 
    name="product_code_clip"
    placeholder="Enter Product Code Clip"
    [(ngModel)]="editProductData.product_code" />

    <button type="submit" class="btn btn-block btn-update" [disabled]=!productForm.valid>
    UPDATE
    </button>
</form>
  

TS

 submitUpdatedRecord(formData: NgForm) {
        console.log(formData.dirty);
        return false;
  

Я выполнил проверку ng-нетронутости в Angular JS, но я не уверен, как это реализовать с Angular 5?

Кто-нибудь может, пожалуйста, помочь?

Ответ №1:

Похоже, у вас есть сочетание реактивных форм и форм, управляемых шаблонами. Я не уверен, зачем вам это нужно [(ngModel)] . pristine и dirty также доступны в Angular 5 . Но вам нужно получить к нему доступ из вашей группы форм.

 submitUpdatedRecord() {
   console.log(this.productForm.pristine);
}
  

FormGroup расширяет AbstractControl . Более подробную информацию о доступных свойствах вы можете найти здесь.