Angular:让用户使用窗体创建对象

Question

我对Angular很陌生，我遇到了一个问题，我希望用户能够用字符串数据填写表单，然后创建一个显示在列表中的对象。我不知道该怎么做，我发现的所有显示列表的教程和示例都使用MockData作为示例，所以我不知道如何将用户输入连接到列表显示。

以下是列表中各个元素的代码(.ts(：

import { Component, OnInit } from '@angular/core';
import { Project } from '../project';
@Component({
selector: 'app-project',
templateUrl: './project.component.html',
styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {
openform = false;
newProjectForm = this.formBuilder.group({
name: '',
pjNummer: '',
})
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
}
onSubmit() {
this.openform = false;
this.newProjectForm.reset();
return this.openform;
}
onClickOpenForm() {
this.openform=true;
return this.openform;
}
}

和.html:

<div>
<button (click)="onClickOpenForm()" 
value="Register">Neues Projekt eintragen</button>
</div>
<div *ngIf="openform">
<form [formGroup]="newProjectForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">
Projektname:
</label>
<input id="name" type="text" formControlName="name">
</div>
<div>
<label for="pjNummer">
PJ-Nummer:
</label>
<input id="pjNummer" type="text" formControlName="pjNummer">
</div>

<button (click)="onSubmit()"
class="button" type="submit">Erstellen</button>

</form>
</div>

列表本身的代码(.ts(：

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-project-list',
templateUrl: './project-list.component.html',
styleUrls: ['./project-list.component.css']
})
export class ProjectListComponent{
projects: any[];

constructor() {}
}

和.html:

<h2> Erstellte Projekte </h2>
<ul class="projects">
<li *ngFor="let project of projects">
<h3>{{project.name}}</h3>
<div><span>Name: </span>{{project.name}}</div>
<div><span>Pj-Nummer: </span>{{project.pjNummer}}</div>
</li>
</ul>

因此，基本上，我所寻找的是一种方法，无论何时提交表单，都可以将用户输入表单的数据添加到"projects:any[]"列表中，但我不确定如何做到这一点。

Answer 1

您可以使用表单组的value方法this.newProjectForm.value((；在此之前.newProjectForm.reset((；它将返回用户输入的所有数据