Question

我在Ionic 4应用程序中使用了Angular。

这是我的表单html

<form #formAuth="ngForm" (ngSubmit)="sendCode(formAuth)" method="post">

  <ion-select placeholder="Country" ngModel name="area_code" interface="modal">
    <ion-select-option code="AF" value="+93">Afghanistan</ion-select-option>
    <ion-select-option code="AL" value="+355" [selected]="true">Albania</ion-select-option>
    .....
    <ion-select-option code="AR" value="+54">Argentina</ion-select-option>
    <ion-select-option code="ZW" value="+263">Zimbabwe</ion-select-option>
  </ion-select>

  <ion-input type="tel" name="number" ngModel value="123456789"></ion-input>

  <ion-button expand="block" type="submit">Send SMS code</ion-button>

</form>

所以我的问题是预定义值不起作用。字段开始为空。

如您所见，我正在尝试使用[selected]="true"选择阿尔巴尼亚，并在文本字段中使用value='123456789'设置默认数字。

如果我从输入中删除了ngModel参数，它可以工作，但随后ngForm停止工作。

我做错什么了吗？

Answer 1

您必须在ts代码中设置表单数据，因为在生成默认为空白或“”的表单值时，ts代码会覆盖此处设置的值。

Answer 2

尝试设置模型的值：

<ion-select placeholder="Country" [(ngModel)]="area_code"  name="area_code" interface="modal">

在您的课堂上：

area_code: string = "+355" ;

Answer 3

我建议将ngModel与双向数据绑定一起使用，并将绑定变量设置为您的值。

在... component.ts中：

this.areaCode = '+355';

在... component.html

中

...
<ion-select [(ngModel)]="areaCode">
...

不能将ngForm与预定义值一起使用

3 个答案: