Angular 带有接口的被动形式

更多的是关于最佳实践的问题。 假设您有一张表格要求填写姓名和年龄：

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

你会先把界面分配给表单吗？或者在提交表单时显示model.value？我这样问是因为API期望的是一个数字，而不是一个数字的字符串

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

表格设置为：

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

---

在我们的应用程序中，我们有表示表单类型的接口。我们有映射器知道如何将表单值映射到实体，并将实体映射回表单值。如果我们没有表单的类型，那么我们的映射程序就不会是类型安全的。我觉得到处都有类型是值得的

---

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

在我们的应用程序中，我们有表示表单类型的接口。我们有映射器知道如何将表单值映射到实体，并将实体映射回表单值。如果我们没有表单的类型，那么我们的映射程序就不会是类型安全的。我觉得到处都有类型是值得的

---

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

只需使用

[ngValue]

而不是下面的

值

<option [ngValue]="20">20</option>
<option [ngValue]="30">30</option>

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

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

console.log('type of age is', typeof this.myForm.controls['age'].value) // gives number

---

只需使用

[ngValue]

而不是像下面这样使用

value

<option [ngValue]="20">20</option>
<option [ngValue]="30">30</option>

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

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

console.log('type of age is', typeof this.myForm.controls['age'].value) // gives number

---

API调用时间您已经验证了值您如何检索所选选项的值？@dileepkumarjami我刚刚更新了我的问题：）在这种情况下，它是一种新形式-没有从API获取任何值。@AndrewJuniorHoward，请查看我的API调用应答时间您已经验证了值您如何检索所选选项的值？@dileepkumarjami我刚刚更新了我的问题：）在这种情况下，它是一种新形式-没有从API获取任何值。@AndrewJuniorHoward，请看一下我的回答，那么您在提交时将界面映射到您的值？是的，在

onSubmit

中，我们采用

formGroup.value

并将其映射到实体，服务接受映射类型。在我们的例子中，它是拥有表单组的组件的责任。所以您在提交时将接口映射到您的值？是的，在

onSubmit

中，我们采用

formGroup.value

并将其映射到实体，服务接受映射类型。在我们的例子中，它是拥有表单组的组件的责任。