My class Inbound looks like down bellow.

export class Inbound {
  constructor(
  public id: number,
  public incomingType: string,
  public quantity: number,
  public location: string,
  public arrived: Date,
  public bin: Bin,
  public truck: Truck,
  public supplier: Supplier
  ) {

HTML ->

<tr>
      <th>ID</th>
      <th>Incoming Type</th>
      <th>Quantity</th>
      <th>Location</th>
      <th>Arrived</th>
      <th>Bin</th>
      <th>Truck</th>
      <th>Supplier</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let inbound of inbounds">
      <td><span>{{inbound.id}}</span></td>
      <td><span>{{inbound.incomingType}}</span></td>
      <td><span>{{inbound.quantity}}</span></td>
      <td><span>{{inbound.location}}</span></td>
      <td><span>{{inbound.arrived}}</span></td>
      <td><span>{{inbound.bin.name}}</span></td>
      <td><span>{{inbound.truck.regNumber}}</span></td>
      <td><span>{{inbound.supplier.name}}</span></td>
      <td>

I have problems with passing these 3 last variables because. My code in Java works, i have checked on Postman. Frontend in Angular meets some lack of knowledge by my side. Method createNewInbound is not visible fron Angular.

<ng-template #content let-modal>
  <div >
    <h4  id="modal-basic-title">New Inbound</h4>
    <button type="button"  aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div >
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <div >
        <label for="incomingType">Incoming Type</label>
        <div >
          <input id="incomingType" name="incomingType"  ngModel>
        </div>
      </div>
      <div >
        <label for="quantity">Quantity</label>
        <div >
          <input id="quantity" name="quantity"  ngModel>
        </div>
      </div>
      <div >
        <label for="location">Location</label>
        <div >
          <input id="location" name="location"  ngModel>
        </div>
      </div>
      <div >
        <label for="arrived">Arrived</label>
        <div >
          <input id="arrived" name="arrived"  ngModel>
        </div>

        ***[FROM  HERE !!!]
      **</div>
      <div >
        <label for="bin.name">Bin Name</label>
        <div >
          <input id="bin.name" name="bin.name"  ngModel>
        </div>
      </div>
      <div >
        <label for="truck.regNumber">Truck Reg Number</label>
        <div >
          <input id="truck.regNumber" name="truck.regNumber"  ngModel>
        </div>
      </div>
      <div >
        <label for="supplier.name">Supplier Name</label>
        <div >
          <input id="supplier.name" name="supplier.name"  ngModel>
        </div>


        [TILL  HERE!!!]*****
      </div>
      <div >
        <button data-dismiss="modal" >Submit</button>
      </div>
    </form>
  </div>

I realize that it might looks like Butter butter and might be time-consuming. If somobody is willing to help me it might be great New Year surpise for me. Here is my repo -> https://github.com/sroko1/Shipping-Bins.git. Have a good day & year. I

CodePudding user response：

You would need to make use of ngModelGroup directive. Below is the code snippet:

      <div  ngModelGroup="bin">   <!-- Added ngModelGroup="bin" -->
        <label for="bin">Bin Name</label>
        <div >
          <input id="bin" name="name"  ngModel>  <!-- Updated name attribute value  --> 
        </div>
      </div>
      <div  ngModelGroup="truck">  <!-- Added ngModelGroup="truck" -->
        <label for="truck.regNumber">Truck Reg Number</label>
        <div >
          <input id="truck.regNumber" name="regNumber"  ngModel>  <!-- Updated name attribute value  -->
        </div>
      </div>
      <div  ngModelGroup="supplier">  <!-- Added ngModelGroup="supplier" -->
        <label for="supplier.name">Supplier Name</label>
        <div >
          <input id="supplier.name" name="name"  ngModel>  <!-- Updated name attribute value  -->
        </div>
      </div>

This will help you to get expected f.value within onSubmit()