Question

我正在尝试将数据从模型上的表单传递回主页上的屏幕输出。我已经尝试过ngModel，但似乎无法使其正常工作。

tasks.component.html

<form  class="well" (submit)="addTask($event)">
<div class="form-group">
<input type="text" [(ngModel)]="name" name="name" class="form-control" placeholder="ADD TASK">
</div>
</form>

tasks.component.ts

import {Component, enableProdMode} from '@angular/core';
import {TaskServices} from "../app/services/task.services";
import {Task} from "../../Task";
enableProdMode();
@Component({
selector: 'tasks',
templateUrl: './tasks.component.html',
styleUrls: ['./tasks.component.css']
})
export class TasksComponent {
tasks: Task[];
name:string;

constructor(private taskServices:TaskServices){
  this.taskServices.getTasks()
      .subscribe(tasks =>{
         console.log(tasks);
        this.tasks = tasks;
      });
 }
 addTask(event){
 event.preventDefault();
 console.log(this.name);
 }

 title = 'app';
 }

Task.ts

 export class Task{
name:string;
}

我在提交表单时写了addTask事件，输入字段数据应该在控制台中打印。

但是当我在输入字段中输入数据并按回车时表单没有提交，表单没有提交。

当我删除.ts文件中的addTask（）时，当我在输入字段中键入一些数据（即data1）并单击回车然后表单正在提交。并且网址看起来像 http://localhost:4200/?name=data1

为什么会发生这种情况以及如何将表单数据提交到addTask（）并在控制台中打印？

如何将数据从带有表单的模式传递到主页？

0 个答案: