Angular-如何通过使用NgForm提交from来发布预填充的输入数据

Question

我确实需要帮助才能找到解决方案。

打开此应用程序后，它将从数据库加载数据，并进入选择选项。

并且当您选择一个选项时，它将自动填写输入字段。直到这里都没问题。

但是当您按下提交按钮并尝试将数据发送回数据库时，就会发生此问题。

我查看了console.log，但没有值（那里只有键），但是如果您手动输入字段，则有值，并且一切正常。

我真的不知道该如何找到正确的解决方案。

---- HTML ----

<form ngForm #f=ngForm (ngSubmit)="OnSubmit(f)" class="d-flex justify-content-center" >

<div ngModelGroup="pickup" id="pickupContainer" class="d-flex justify-content-between" >
                <div id="container_left">
                    <div class="input-group mb-3" >
                        <label for="PickupAddrBook" class="input-group-text" >Address Book</label>
                        <select class="input-group-append"  id="PickupAddrBook" type="text"  
                        (change)="OnChange($event,pickupCompany,pickupAddr1,pickupAddr2,pickupSuburb,pickupContact)">
                            <option value="">---Address Book(clear)---</option>
                            <option *ngFor="let item of addrBook[0]" value="">{{item.code}} : {{item.compnay}}{{item.addr1}}{{item.addr2}}{{item.suburb}}</option>
                        </select>

                    </div>
                    <div class="input-group mb-3" >
                        <label for="pickupCompany" class="input-group-text" >Company</label>
                        <input #pickupCompany #pickupCompany=ngModel class="input-group-append" ngModel name="pickupCompany" id="pickupCompany" type="text">
                    </div>
                    <div class="input-group mb-3" >
                        <label for="pickupAddr1" class="input-group-text" >Address Line 1</label>
                        <input #pickupAddr1 class="input-group-append" ngModel name="pickupAddr1" id="pickupAddr1" type="text">
                    </div>
                    <div class="input-group mb-3" >
                        <label for="pickupAddr2" class="input-group-text" >Address Line 2</label>
                        <input #pickupAddr2 class="input-group-append" ngModel name="pickupAddr2" id="pickupAddr2" type="text">
                    </div>
                    <div class="input-group mb-3" >
                        <label for="pickupSuburb" class="input-group-text" >Suburb</label>
                        <input #pickupSuburb class="input-group-append" ngModel name="pickupSuburb" id="pickupSuburb" type="text">
                    </div>        
                    <div class="input-group mb-3" >
                        <label for="pickupContact" class="input-group-text" >Contact</label>
                        <input #pickupContact class="input-group-append" ngModel name="pickupContact" id="pickupContact" type="text">
                    </div>

<button type="submit" class="btn btn-primary">Submit</button>
<form>

--- TS ---

 OnChange($event,pickupCompany,pickupAddr1,pickupAddr2,pickupSuburb,pickupContact
    ) {
    if ($event.target.selectedIndex==0) {
      pickupCompany.value= "";
      pickupAddr1.value= "";
      pickupAddr2.value= "";
      pickupSuburb.value= "";
      pickupContact.value= "";
    }else{   
    let i:number = $event.target.selectedIndex-1;

    pickupCompany.value= this.addrBook[0][i].company;
    pickupAddr1.value= this.addrBook[0][i].addr1;
    pickupAddr2.value= this.addrBook[0][i].addr2;
    pickupSuburb.value= this.addrBook[0][i].suburb;
    pickupContact.value= this.addrBook[0][i].contact;

    }

Answer 1

请添加“ ngForm”到您的

<form #f="ngForm" (ngSubmit)="OnSubmit(f)" class="d-flex justify-content-center" >