CODEWITHSUNDEEP
angulartypescriptasp.net-web-api2
Eduard
Eduard

Reputation: 722

Angular 5 post object from dropdownlist

I am trying to add a worker to a job from a dropdownlist and I do not understand how to write this in typescript. I am very new to Angular and Typescript so this can be basic for you but I want to learn and google isn't very helpful on this or I don't know how to search this specific problem. To make it clear I will add the models from web api too.

Job:

public class Job
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public DateTime DueDate { get; set; }
    public bool IsCompleted { get; set; }

    public virtual ICollection<Worker> Worker { get; set; }
}

Worker:

public class Worker
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }

    public virtual ICollection<Job> Job { get; set; }
}

So there will be generated a table between these two tables where I want to store all Workers assigned to a Job. When I add a new Job I have populated a DropDownlist with all the workers available and I want to select a worker and submit with the rest of inputs.

Here are the models from Angular:

Jobs:

export class Jobs {
  Id: number;
  Name: string;
  Description: string;
  DueDate: Date;
  IsCompleted?: boolean;

  worker: Worker[];
}

Worker:

export class Worker {
  Id: number;
  FirstName: string;
  LastName: string;
}

Jobs Service:

addJob(jobs: Jobs): Observable<Jobs> {
    return this.http.post<Jobs>(this.apiURL, jobs, httpOptions);
}

Ok so far I am pretty sure everything is alright, from now on there are 2 important problems:

  1. I am not sure how to bind correctly the DropDownlist for posting data.
  2. I don't know how to pass the object that I am taking from DropDownlist into the TypeScript component and send it to the service.

HTML Component Dropdownlist:

<div class="row">
  <div class="col-md-12">
        <label class="labelInputs">Select Worker</label><br>
        <select [(ngModel)]="workers" class="form-control">
          <option value="0">Select Worker</option>
          <option *ngFor="let worker of workers" value="worker">{{worker.FirstName}} {{worker.LastName}}</option>
      </select>
  </div>

Submit button of inputs and DropDownlist:

  <button class="brn btn-lg btn-block btn-change" (click)="add(name.value, desc.value, workers)">Add Job</button>

TypeScript add method:

jobs: Jobs[];
workers: Worker[];

ngOnInit() {
    this.getJobs();
    this.getWorkers();
}

add(Name: string, Description: string, worker: object): void {
    this.jobsServices.addJob({Name, Description, worker } as Jobs)
        .subscribe(jobs => {
            this.jobs.push(jobs);
        });
}

I tried various things to pass the worker object, but at least this reaches my API but fails ModelState because I am not receiving any worker because first of all binding is wrong and in console I get "worker" for parameter worker not an actual object.

"ERROR Error: Error trying to diff 'worker'. Only arrays and iterables are allowed"

I appreciate any help, tutorials, links, explanations or what to modify here.

Upvotes: 0

Views: 1421

Answers (1)

Chau Tran
Chau Tran

Reputation: 5108

Make these changes:

  • Add a variable worker: Worker to your TS

  • On <select>, change [(ngModel)]="workers" to [(ngModel)]="worker".

  • On <option>, change value to [value]. [] is Property Binding, if you don't have [] around value, what you pass in the value is actually the string worker.
  • Your function now take in worker instead of workers.

Upvotes: 1

Related Questions