Angular表单绑定时强制值类型[重复]答案

【问题标题】：Force value type when Angular form binding [duplicate]Angular表单绑定时强制值类型[重复]
【发布时间】：2020-02-04 14:00:39
【问题描述】：

我们在 Angular 中有一个表单，它有一个显示项目列表的选择：

<select formControlName="koppelingTypeId" id="KoppelingTypeId" class="form-control">
    <option value="">Selecteer een type</option>
    <option [value]="koppeling.koppelingTypeId" *ngFor="let koppeling of koppelingen">{{koppeling.naam}}</option>
</select>

绑定值koppelingTypeId的类型是数字。然而，当请求表单控件的值时，我们总是将其作为字符串返回。回发到 .NET Core 端点时，这不会被视为有效值，因此会出现错误。

有没有办法强制表单将值保留为字符串？

相关，但略有不同。我们还有几个字段需要 Guid 值（通过正则表达式验证器强制执行），我们希望在字段为空时返回 null，否则会在 .NET Core 中产生相同的反序列化问题。

谢谢

【问题讨论】：

嗯，数字有答案。但我不知道它是否适用于所有数据类型。答案是here。哦，我看到有人在下面给了你类似的答案......
这能回答你的问题吗？ Angular cast select value to int

标签： angular

【解决方案1】：

您需要使用[ngValue] 而不是[value]。这将保留适当的数据类型。

<form [formGroup]="form" *ngIf="form">
    <select formControlName="selectCtrl" class="form-control">
    <option [ngValue]="null">Selecteer een type</option>
    <option [ngValue]="link.linkId" *ngFor="let link of links">{{link.name}}</option>
</select>

Here's a stackblitz that shows it working

【讨论】：

你完全赢得了互联网！快速提问，您是否还知道一种方法可以使空文本框产生null 作为值而不是空字符串''？
同样的想法，确保使用 [ngValue] 并将值设置为 null - 我已经编辑了代码示例以进行演示。 stackblitz 也显示了它的工作原理。
对于我在使用文本框时的空值。当您在文本框中输入内容然后再次清除它时，检查此闪电战stackblitz.com/edit/angular-uyzqyc，该值变为''。它希望它再次成为null。
啊，我明白了，我的错误。不同的元素。在这种情况下，您可以订阅该控件的“valueChanges”事件并将值设置为 null。此处示例：stackblitz.com/edit/angular-4rxnda
感谢您与我一起思考，我最终添加了一个自定义验证器函数来检查控件值是否 === ''，如果是，则使用 setValue 函数将其设置为 null。似乎工作。不如说指令 imo 漂亮，但我会接受它。