Question

我在申请中遇到了奇怪的错误。我模板驱动的表单有两个地址两个填充：

    <ion-list>

          <ion-list-header color="secondary">From

            <button ion-button icon-only item-right clear small (click)="usePosition($event)">
              <ion-icon name="locate"></ion-icon>
            </button>

            <button ion-button icon-only item-right clear small (click)="searchAddress(true,$event)">
              <ion-icon name="search"></ion-icon>
            </button>

            <button ion-button icon-only item-right clear small (click)="useHome(true,$event)">
              <ion-icon name="home"></ion-icon>
            </button>
          </ion-list-header>
          <div>
            <ion-item>
              <ion-label floating>Street Address*</ion-label>
              <ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="createRequest.legs[0].addressFrom.Street"
                         required></ion-input>
            </ion-item>

            <ion-item>
              <ion-label floating>Floor/Apartment</ion-label>
              <ion-input type="text"
                         name="Extention"
                         [ngModelOptions]="{standalone: true}"
                         [(ngModel)]="createRequest.legs[0].addressFrom.Extention"></ion-input>
            </ion-item>

            <ion-item padding>
              <ion-label floating>City or Borough*</ion-label>
              <ion-input type="text" required name="City"
                         pattern="[a-zA-Z ]*"
                         [ngModelOptions]="{standalone: true}"
                         [(ngModel)]="createRequest.legs[0].addressFrom.City">
              </ion-input>
            </ion-item>

            <ion-item padding-bottom>
              <ion-label floating>
                Zip Code*(5 digits)
              </ion-label>
              <ion-input type="tel" name="Zip" #ZipF="ngModel"
                         pattern="\d{5}"
                         [textMask]="{mask:masks.zip}"
                         [ngModelOptions]="{standalone: true}"
                         [(ngModel)]="createRequest.legs[0].addressFrom.Zip"
              ></ion-input>
            </ion-item>
          </div>
        </ion-list>
<ion-list padding-bottom padding-top>

      <ion-list-header>To
        <button ion-button icon-only item-right clear small (click)="searchAddress(false,$event)">
          <ion-icon name="search"></ion-icon>
        </button>
        <button ion-button icon-only item-right clear small (click)="useHome(false,$event)">
          <ion-icon name="home"></ion-icon>
        </button>
      </ion-list-header>


        <ion-item>
          <ion-label floating>Street Address*</ion-label>
          <ion-input type="text"
                     [ngModelOptions]="{standalone: true}"
                     #Street="ngModel"
                     [(ngModel)]="createRequest.legs[0].addressTo.Street"
                     required></ion-input>
        </ion-item>

        <ion-item>
          <ion-label floating>Floor/Apartment</ion-label>
          <ion-input type="text"
                     [ngModelOptions]="{standalone: true}"
                     #Extention="ngModel"
                     [(ngModel)]="createRequest.legs[0].addressTo.Extention"
          ></ion-input>
        </ion-item>

        <ion-item padding>
          <ion-label floating>City or Borough*</ion-label>
          <ion-input type="text"
                     pattern="[a-zA-Z ]*"
                     #City="ngModel"
                     [ngModelOptions]="{standalone: true}"
                     [(ngModel)]="createRequest.legs[0].addressTo.City">
          </ion-input>
        </ion-item>

        <ion-item>
          <ion-label floating>Zip Code(5 digits)</ion-label>
          <ion-input type="tel" #Zip="ngModel"
                     pattern="\d{5}"
                     [ngModelOptions]="{standalone: true}"
                     [textMask]="{mask:masks.zip}"
                     [(ngModel)]="createRequest.legs[0].addressTo.Zip"
          ></ion-input>
        </ion-item>



    </ion-list>

我尝试使用[ngModelOptions]="{standalone: true}"但没有任何结果。在某些时刻，由于未知的原因，两个地址开始相互重复，在这种情况下甚至更奇怪的是使用预定义数据（如在useHome（）方法中）没有生效。我知道答案就在附近，所以会提前感谢任何帮助。

Answer 1

这行代码：

[ngModelOptions]="{standalone: true}"

告诉表单您的输入元素 NOT 是否包含在表单数据中。您只希望使用您不希望在提交时跟踪的控件来执行此操作。例如，假设您有一个复选框，只需打开或关闭用户界面的一部分。您不想要提交数据的那一部分，因此您可以使用standalone选项，以便它独立于＃34;从表格及其数据。

Answer 2

为表单字段使用唯一的name属性，这样每个表单字段都将作为单独的字段进行评估。我发现name属性的使用存在一些不一致，所有属性都应该具有name属性，如果您想使用验证，则#someName="ngModel"属性ngModelOptions。完全松开From...。我会将这些内容分开，并为To...属性执行name和Street：

例如<ion-input name="FromStreet" #FromStreet="ngModel" [(ngModel)]="createRequest.legs[0].addressFrom.Street" required> </ion-input>的两个字段：

 <ion-input type="text" name="ToStreet" #ToStreet="ngModel"
     [(ngModel)]="createRequest.legs[0].addressTo.Street" required>
 </ion-input>

和

WaiterIterator

这样所有字段都是唯一的。

在Forms中处理具有相同名称的字段的正确方法

2 个答案: