Adding 2 Inputs into my Backend with 1 Button

Question

How can I add 2 inputs with one button into my backend?

Here is an example, I want that my User can write in my todo list, a task(string) and a sort of ID(number). And he can add these 2 inputs with the Button ADD:

Example Code:

    <div id="main">
  <h2 class="task-title">My Tasks</h2>
  <div>
    <form class="addTask">
      <mat-form-field class="taskInput-widht">
        <mat-label>Task name</mat-label>
        <input matInput placeholder="Ex. Team meeting" maxlength="25" #taskName/>
      </mat-form-field>
      <mat-form-field class="taskIdInput-width">
        <mat-label>Username ID</mat-label>
        <input matInput placeholder="Ex. 1" #taskID/>
      </mat-form-field>
      <!--(click) passes input value to add() and then clears the input-->
      <span class="addButton">
  <button mat-raised-button color="primary" (click)="add(taskName.value); taskName.value=''">
    ADD
  </button>
</span>
    </form>
  </div>

I know that in this example I only send with the (click) the taskname.value to my backend, but the point is, I don't know how to do it with a second variable.

Add component method:

  add(name: string): void {
this.taskService.addTask({name} as Task)
  .subscribe(task => {
    this.tasks.push(task);
  });
  }

Add service method:

      /** POST: add a new task to the server */
  addTask(task: Task): Observable<Task> {
    return this.http.post<Task>(`${this.tasksUrl}/task`, task, this.httpOptions);
  }

i think you have use reactive form. You can create a formGroup with the 2 inputs and every time you press add to push a new formGroup to a formArray — Tzimpo
– Tzimpo, Commented Apr 2, 2020 at 12:14

Anoop Rajasekhara Warrier · Accepted Answer · 2020-04-02 13:08:36Z

I think you can use reactive forms here. Please refer the snippet below:

In TS:

public myform: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.intializeForm();
}

private intializeForm() {
  this.myform = this.formBuilder.group({
   name: ["", Validators.required],
   id: ["", Validators.required]
  });
}

add(){
  let name = this.myform.get('name').value;
  let id = this.myform.get('id').value;
  console.log(name  + "-" + id);
  // Add the logic to add task
}

In HTML:

<div id="main">
<h2 class="task-title">My Tasks</h2>
<div>
    <form class="addTask" [formGroup]="myform">
        <mat-form-field class="taskInput-widht">
            <mat-label>Task name</mat-label>
            <input matInput formControlName="name" placeholder="Ex. Team meeting" maxlength="25" />
  </mat-form-field>
        <mat-form-field class="taskIdInput-width">
            <mat-label>Username ID</mat-label>
                <input matInput formControlName="id" placeholder="Ex. 1" />
  </mat-form-field>
        <span class="addButton">
    <button mat-raised-button color="primary" (click)="add()">ADD</button>
  </span>
    </form>
</div>
</div>

Demo links:

https://stackblitz.com/edit/angular-sf-reactive-from-issue?file=src%2Fapp%2Fto-do%2Fto-do.component.html

https://angular-sf-reactive-from-issue.stackblitz.io

For Reactive form details:

https://angular.io/guide/reactive-forms

Hope this helps.

Collectives™ on Stack Overflow

Adding 2 Inputs into my Backend with 1 Button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related