Определить, изменились ли данные в форме или нет

Question

В приложении angular я использую шаблонно-управляемую форму (не реактивную форму). Я хочу показать всплывающее окно пользователю, если пользователь закрывает форму, в которую он ввел некоторые данные.

Пользователю будет разрешено закрыть форму, если он ничего не введет внутри формы.

В реактивной форме мы можем подписаться на form’s value Changes observable и определить, изменилась ли форма или нет.

Как мне сделать это внутри компонента в шаблоне. form.dirty можно проверить только внутри шаблона, а не внутри файла компонента

Answer 1

Вы можете в равной степени подписаться на управляемые шаблоном формы:

<form #myForm="ngForm" (submit)="myForm.valid && submitForm()">
  <input type="text" id="name"
   required
   [(ngModel)]="model.name" name="name">
</form>

И в .ts:

formChanged:boolean 
@ViewChild("myForm", { static: true }) myForm: NgForm
ngOnInit() {
    this.myForm.form.valueChanges.subscribe(c => {
            this.formChanged = true; 
    });
}

closeForm(){
    if(this.formChanged){
        ...show message
    }else 
        ...close
}

Answer 2

На самом деле шаблон формы является старым. Angular команда, рекомендующая использовать реактивную форму. так как он простой и мощный, чем управляемые шаблоном формы. Хорошо. Для вашей проблемы используйте переменную ref шаблона, например: #templateVar = "ngForm"

, используйте templatevar в компоненте, чтобы получить ссылку на вашу форму