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 
   }
}

我以为可以使用blur事件，但是当我选择new时，该值存在。可能有更好的方法，当我刚接触Angular时，完全可以接受建议。预先感谢。

Answer 1

表单控件具有许多不同的属性，您可以使用它们来了解它们所处的当前状态。

dirty将是一个布尔值，表示表单控件值是否已更改，touched可能对您也很有用，可让您知道控件是否已被用户触摸。 / p>

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
   }
}

您可能不希望您的应用程序在用户有机会编辑表单之前显示错误。在用户执行以下两项操作之一之前，检查是否脏污和是否被触摸可防止显示错误：更改值，将控件变脏；或模糊表单控件元素，将控件设置为“触摸”。

Documentation surrounding controls。

Angular 2-检查单选按钮选择值

1 个答案: