Вызов диалогового окна на основе изменений в полях ввода формы

Question

У меня есть кнопка с именем Add. При нажатии на эту кнопку я вызываю компонент с именем add-customer внутри dialog window, например:

Сценарий: Если я внес какие-либо изменения в input fields компонента add-customer и нажму кнопку CANCEL, еще одна dialogue будет вызвана с таким сообщением:

Вот вопрос:

2nd dialog window приходит только в том случае, если изменения сделаны в обязательных полях ввода и нажмите кнопку ОТМЕНА , но я хочу вызвать 2nd dialog window даже , если я внес изменения в любой из поля ввода и флажок.

Вот демоверсия stackblitz .

Answer 1

Это должно быть довольно легко с функцией dirty. Он возвращает true, если в форму было внесено какое-либо изменение.

Пример:

if(this.addCusForm.dirty){
  //show modal
}

Примечание: не забудьте добавить formControlName для каждого элемента управления.

Вот рабочая копия - https://stackblitz.com/edit/angular-modal-issue-sgjc1f

Answer 2

вы можете подписаться на форму valueChanges, наблюдаемую, которая будет выдавать значение, если любое из значений элемента управления формы будет меняться, а также любой элемент управления формы имеет тот же API, так что вы можете подписаться на или от конкретного элемента управления для проверки изменений

ngOnInit() {
 this.addCusForm.valueChanges.subscribe( value => {
 ...
 })

 this.addCusForm.get('firstname').valueChanges.subscribe( value => {
 ...
 })

}