如何显示基于具有相同ngModel的选择选项的输入文件

Question

<form #uform="ngForm">
Service
<select name="type" class="form-control" [(ngModel)]="create.type">
<option value="Youtube">Youtube</option>
<option value="Facebook">Facebook</option>
<option value="Custom">Custom</option>
</select>
Custom
<input *ngIf="create.type=='Custom'" name="type" class="form-control" type="text" [(ngModel)]="create.type">
<button (click)="createDetails();" class="create" type="submit">Create now</button>
</form>

当我选择自定义选项时，文本字段会显示，但是当我编辑它时，它消失了，因为create.type的值发生了变化。现在必须具有相同的名称类型，否则后端将不接受它。 我想要的只是如果选择了自定义，那么用户应该在输入字段中输入文本，并且创建对象应该更新到正确的值。

create: any ={  }

createDetails() {
this.api.create(create).subscribe()
}

Answer 1

您可以在输入中使用不同的ngModel，然后在createDetails函数中使用该值来调用后端

Answer 2

发生这种情况是因为您要替换"create.type"属性。

您可以从输入中删除 [(ngModel(]="create.type"，然后您可以访问 ts 文件中的表单数据并根据需要对其进行操作，最后将其发送到后端。