Angular 2 - Проверка значения выбора переключателя

Question

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

Код шаблона:

<mat-radio-group formControlName="orderAction" (change)="onOrderActionBlur($event)">
  <mat-radio-button value="new" >New Order</mat-radio-button>
  <mat-radio-button value="existing">Existing Order</mat-radio-button>
</mat-radio-group>

И в контроллере:

onOrderActionBlur($event): any {
   this.orderAction= this.form.get('orderAction').value;

   if (this.orderAction=== 'new') {
     // make sure the fields haven't been changed 
   }
}

Я думал, что смогу использовать событие размытия, но когда я выбираю новый, значение уже существует.Вероятно, есть лучший подход, полностью открытый для предложений, так как я новичок в Angular.Заранее спасибо.

Answer 1

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

dirty будет логическим значением, показывающим, было ли изменено значение элемента управления формы, touched можеттакже может быть полезно для вас, позволяя вам узнать, был ли пользователь затронут элементом управления.

onOrderActionBlur($event): any 
{
   this.orderAction= this.form.get('orderAction');

   if (this.orderAction.dirty) 
   {
     // control value has been modified 
   }
   else 
   {
     // control value has not been modified
   }
}

Возможно, вы не захотите, чтобы ваше приложение отображало ошибки до того, как пользователь сможет изменитьформа.Проверки на наличие «грязных» и «прикосновений» не позволяют отображать ошибки, пока пользователь не выполнит одно из двух действий: изменяет значение, делая элемент управления грязным;или размывает элемент управления формы, устанавливая элемент управления на прикосновение.

Документация вокруг элементов управления .