Angular 6 - 如何提交表单的一个区域（但不是整个表单）

Question

我想在用户点击“保存”按钮时提交html页面的单个区域。 html页面包含许多可以编辑的任务，当用户单击保存按钮时，我希望将单个任务提交给服务器，即不是所有任务都提交给服务器。做这个的最好方式是什么。以下是我的代码： -

HTML： -

<mat-accordion multi="true">
  <div class="task-element" *ngFor="let task of selectedDayTasks">
    <div class="expansion-panel">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-form-field class="title-box">
            <input matInput 
              value="{{ task.title }}">
          </mat-form-field>
            <!--{{ task.title }}-->
        </mat-expansion-panel-header>
        <mat-form-field class="description-box">
          <textarea matInput value="[(task.description)]"></textarea>
        </mat-form-field>
        <!--<p>{{ task.description }}</p>-->
        <mat-action-row>
          <button mat-button color="warn" (click)="onSave(task._id, task.title, task.description, task.complete, task.day)">SAVE</button>
        </mat-action-row>
      </mat-expansion-panel>
    </div>
    <div class="done-button">
      <button class="green-btn" *ngIf="task.complete" (click)="taskStateChange(task._id)" mat-fab>YES</button>
      <button *ngIf="!task.complete" (click)="taskStateChange(task._id)" color="warn" mat-fab>NO</button>
    </div>
  </div>
</mat-accordion>

Task.component.ts： -

import { Component, Input } from '@angular/core';

import { Task} from './task.model';
import { DailyTaskService } from './daily-task.service';

@Component({
  selector: 'app-daily-tasks',
  templateUrl: './daily-tasks.component.html',
  styleUrls: ['./daily-tasks.component.css']
})
export class DailyTasksComponent implements OnInit, OnChanges {

  @Input() selectedDay: string;

  tasks: Task[] = [];
  selectedDayTasks: Task[] = [];

  constructor(public dailyTaskService: DailyTaskService) {}

  ngOnInit() {


    this.dailyTaskService.getTasks()
      .subscribe(taskData => {
        this.tasks = taskData;

        this.tasks.forEach((task)=>  {
          if (task.day == 'Monday') {
            this.selectedDayTasks.push(task);
          }
        });
      });
  }

  onSave(_id: number, title: string, description: string, complete: boolean, day: string ) {
    this.dailyTaskService.updateTask(
      _id,
      title,
      description,
      complete,
      day
    );
  }
}

Answer 1

我解决了，我需要使用[（ngModel）] ie -

<input matInput [(ngModel)] = {{task.title}}">