मेरे पास निम्न फॉर्मग्रुप है:

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

हालांकि, पृष्ठ के निचले भाग पर स्थित पुष्टिकरण बटन की स्थिति अक्षम रहती है ([अक्षम] ='!order.valid') और केवल तभी मान्य होती है जब मैं प्रत्येक फ़ील्ड पर मैन्युअल रूप से एक कुंजी दबाता हूं।

कोई विचार यह कैसे हल करें?

अग्रिम में धन्यवाद।

-1
Subjugation 7 जिंदा 2020, 00:46
DblClick हैंडलर के अंदर this.order.updateValueAndValidity() को कॉल करने का प्रयास करें
 – 
Paolo
7 जिंदा 2020, 00:56
दुर्भाग्य से काम नहीं किया। फॉर्मग्रुप को मान्य करने के लिए अभी भी मुझे मैन्युअल रूप से 2 इनपुट पर कीडाउन करना है
 – 
Subjugation
7 जिंदा 2020, 01:00

2 जवाब

ढ़ूँढ निकाला। मैन्युअल रूप से .setValue विधि का उपयोग करना था और इसे डबल क्लिक हैंडलर में इनपुट करना था जैसे:

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

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

0
Subjugation 7 जिंदा 2020, 01:10

भविष्य के संदर्भ के लिए, यदि आप विशिष्ट कार्यों को बनाए बिना मूल्यों को डायनामिक रूप से सेट करना चाहते हैं तो आप कुछ ऐसा कर सकते हैं:

 dblClickHandler(event) {
    const control = event.target.getAttribute('formControlName');
    this.order.get(control).setValue(event.target.value);
 }
0
Paolo 7 जिंदा 2020, 01:44
हाँ मज़ेदार। धन्यवाद
 – 
Subjugation
7 जिंदा 2020, 12:26