двойной щелчок автоматически заполняет поле формы, но не подходит для требуемого валидатора? - PullRequest
Новая
       23

двойной щелчок автоматически заполняет поле формы, но не подходит для требуемого валидатора?

0 голосов
/ 07 января 2020

У меня есть следующая группа форм: 

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})$')*/])
})

и следующий компонент. 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>

При двойном щелчке по элементам управления городом или улицей выполняются следующие функции: вызывается и автоматически заполняет входные данные данными пользователя: 

dblClickCity(target) {
    console.log(target.touched);
    target.value = this.city;
}
dblClickStreet(target) {
    target.value = this.street;
}

Однако состояние кнопки подтверждения в нижней части страницы остается отключенным ([disabled] = '! order.valid') и проверяется только как только я вручную нажимаю клавишу на каждом поле.

Есть идеи, как решить эту проблему?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 07 января 2020

для дальнейшего использования, если вы хотите установить значения динамически, не создавая специфические c функции, вы можете сделать что-то вроде: 

 dblClickHandler(event) {
    const control = event.target.getAttribute('formControlName');
    this.order.get(control).setValue(event.target.value);
 }
0 голосов
/ 07 января 2020

Разобрался. Пришлось вручную использовать метод .setValue и ввести его в обработчики двойного щелчка следующим образом: 

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

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