Question

更多有关最佳做法的问题。假设您有一个要求输入姓名和年龄的表格：

<form [formGroup]="myForm" novalidate (ngSubmit)="sendMyForm(myForm)"><label>Name</label>
<input type="text" />
<hr />
<label>Age</label>
<select><option value="20">20</option><option value="30">30</option></select></form>

请注意，下拉列表是数字。现在，当然，默认情况下，它将是一个字符串，而不是<select>中的数字。

我的问题是我应该建立一个界面，例如：

export interface Person {
  name: string;
  age: number;
}

您会首先以某种方式将接口分配给表单吗？还是在提交表单时在model.value上？我问，因为API会期望数字而不是数字的字符串。

如果您要预先将界面分配给表单，请说明如何执行此操作？

表单设置为：

this.myForm = this.fBuilder.group({
            name: null,
            age: null
        });

Answer 1

在我们的应用程序中，我们有代表表单类型的接口。而且我们有映射器，它们知道如何将表单值映射到实体并将实体映射回表单值。如果我们没有表单的类型，那么我们的映射器将不是类型安全的。恕我直言，值得在所有地方都使用类型。

您可以在表单值和服务之间添加映射，以便服务期望映射类型，或者使服务期望表单类型并在服务内部进行映射。

Answer 2

只需使用http代替import { Component, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { FormService } from './forms.service'; import { form } from './form-interface'; import { HttpClient } from '@angular/common/http'; import { Subscription } from 'rxjs'; @Component({ selector: 'app-forms', templateUrl: './forms.component.html', styleUrls: ['./forms.component.css'] }) export class FormsComponent implements OnInit, OnDestroy { dataSubscription: Subscription; formsUrl = "https://jsonplaceholder.typicode.com/posts"; forms: any; title: any; body: any; id: any; post: form = { "userId": 0, "id": 0, "title": "", "body": "" }; constructor(private formService: FormService ,private route: ActivatedRoute, private router: Router, private http: HttpClient) { } ngOnInit() { this.id=this.route.snapshot.params['id']; this.formService.getForms(this.id).subscribe( (posts: any) => { this.forms = posts[0]; console.log(posts); this.title = this.forms.title; this.body = this.forms.body; } ); } editForm(){ this.dataSubscription = this.http.put(this.formsUrl + "/" + this.post.id, { id: this.post.id, title: this.post.title, body: this.post.body, userId: this.post.userId }).subscribe( (response) => { console.log(response); }, (error) => { console.log(error); }); } ngOnDestroy(){ if(this.dataSubscription){ this.dataSubscription.unsubscribe(); } } }如下

[ngValue]

此外，您需要将value放在<option [ngValue]="20">20</option> <option [ngValue]="30">30</option>标签上

formControlName

您不需要使用任何映射和转换。

要检查类型，请将以下内容保留在提交时触发的方法中

select

带界面的反应形式

2 个答案: