Добавление 2 входов в мой бэкэнд с 1 кнопкой

Question

Как я могу добавить 2 входа с одной кнопкой в ​​свой бэкэнд?

Вот пример, я хочу, чтобы мой пользователь мог написать в моем списке задач, задачу (строку) и своего рода идентификатор (число). И он может добавить эти 2 входа с помощью кнопки ADD:

Пример кода:

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

Я знаю, что в этом пример, который я только посылаю (щелкаю) taskname.value на свой бэкэнд, но дело в том, что я не знаю, как это сделать со второй переменной.

Добавить метод компонента:

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

Добавить метод обслуживания:

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

Answer 1

Я думаю, вы можете использовать реактивные формы здесь. Пожалуйста, обратитесь к фрагменту ниже:

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

В 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>

Демонстрационные ссылки:

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

Для деталей Реактивной формы:

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

Надеюсь, это поможет.