Forms 处理表单中同名字段的正确方法

我在应用程序中遇到了奇怪的错误。I模板驱动表单，两个地址两个填写：

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

从…起
街道地址*
楼层/公寓
城市或自治区*
邮政编码*（5位）
到
街道地址*
楼层/公寓
城市或自治区*
邮政编码（5位）

我试图使用

[ngModelOptions]=“{standalone:true}”

，但没有任何结果。 由于未知的原因，在某个时刻，两个地址开始相互复制，在这种情况下，更奇怪的是，使用预定义数据（如useHome（）方法）并没有产生效果。我知道答案就在眼前，所以我会提前感谢您的帮助。 这行代码：

[ngModelOptions]="{standalone: true}"

---

告诉表单您的输入元素未作为表单数据的一部分包含。您只希望使用不希望在提交时跟踪的控件来执行此操作。例如，假设您有一个复选框，它只打开或关闭用户界面的一部分。您不需要提交数据的这一部分，因此可以使用

独立

选项，使其与表单及其数据“独立”。

对表单字段使用唯一的

名称

属性，这样每个表单字段都将作为单独的字段进行计算。我发现在使用

name

属性时存在一些不一致，如果要使用验证，所有属性都应该具有

name

属性，以及

#someName=“ngModel”

。完全松开

ngmodel选项。我会将它们分开，并对
name
属性执行例如
从…
和
到…
：

例如，
街道
的两个字段：



及



这样所有字段都是唯一的。
感谢ypu的回复。正如我在问题中所说的，我认为这是解决我的问题的可能方法，类似于这里：这不是一个好的解决方案。我投了反对票，也许应该在上面加一条注释。使用standalone会阻止控件与窗体一起正常工作。正如其他人提到的。。。这包括验证。您能否编辑示例中的代码以显示
name
属性的用法？