Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/email/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 双击“自动填写表单”字段,但不符合所需验证程序的条件?_Angular_Autofill_Angular Custom Validators - Fatal编程技术网

Angular 双击“自动填写表单”字段,但不符合所需验证程序的条件?

Angular 双击“自动填写表单”字段,但不符合所需验证程序的条件?,angular,autofill,angular-custom-validators,Angular,Autofill,Angular Custom Validators,我有以下表格: this.order = new FormGroup({ City: new FormControl('', Validators.required), Street: new FormControl('', Validators.required), DateOfDelivery: new FormControl('', Validators.required), CreditCard: new FormControl('', [Validato

我有以下表格:

this.order = new FormGroup({
    City: new FormControl('', Validators.required),
    Street: new FormControl('', Validators.required),
    DateOfDelivery: new FormControl('', Validators.required),
    CreditCard: new FormControl('', [Validators.required,/*Validators.pattern('^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$')*/])
})
以及下面的component.html

<form [formGroup]="order">
    <label>City</label>
    <br>
    <input class="form-control" list="City" name="City" formControlName="City" placeholder="Choose City" (dblclick)='dblClickCity($event.target)'>
    <datalist id="City">
        <option value="New York">
        <option value="Berlin">
        <option value="London">
    </datalist>
    <br>
    <label>Street</label>
    <br>
    <input type="text" class="form-control" placeholder="Please Input Street for Delivery"
           formControlName="Street" (dblclick)='dblClickStreet($event.target)'>
    <br>
    <label>Shipping Date</label>
    <br>
    <input type="date" class="form-control" placeholder="First Name here" formControlName="DateOfDelivery">
    <br>
    <label>Credit Card:</label>
    <br>
    <input type="text" class="form-control" placeholder="Credit Card here" formControlName="CreditCard">
    <br>
</form>
但是,页面底部的“确认”按钮的状态保持为禁用状态([disabled]=“!order.valid”),并且仅在我手动点击每个字段上的一个键后才进行验证

你知道怎么解决这个问题吗

提前谢谢。

想好了。 必须手动使用.setValue方法并将其输入双击处理程序,如下所示:

  dblClickCity() {
    this.order.controls.City.setValue(this.city);
  }

  dblClickStreet() {
    this.order.controls.Street.setValue(this.street);
  }


为了便于将来参考,如果您希望在不创建特定函数的情况下以友好方式设置值,可以执行以下操作:

 dblClickHandler(event) {
    const control = event.target.getAttribute('formControlName');
    this.order.get(control).setValue(event.target.value);
 }

尝试在dblClick句柄中调用此.order.updateValueAndValidity(),幸运的是,该函数不起作用。仍然需要我手动键入2个输入以验证formgroupYeah,很好。谢谢
 dblClickHandler(event) {
    const control = event.target.getAttribute('formControlName');
    this.order.get(control).setValue(event.target.value);
 }