Proper way to handle fields with same names in Forms - forms

Question

I met strange bug in my application. I template driven form with two addresses two fill:
<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>
I tried to use [ngModelOptions]="{standalone: true}" but without any result.
At some moment for unkonown reason two addresses start duplicate each other and even stranger thing in this case that using predefined data(like in useHome() method) didn't give effect. I know that answer is near, so will appreciate any help in advance.

Answer 1

Use unique name attributes for your form fields, this way each form field will be evaluated as separate one. I see some inconsistency in the use of the name attribute, all should have a name attribute, as well as #someName="ngModel" if you want to use validation. Loose the ngModelOptions altogether. I would separate these and do for example From... and To... for the name attribute:
For example the two fields for Street:
<ion-input name="FromStreet" #FromStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressFrom.Street" required>
</ion-input>
and
<ion-input type="text" name="ToStreet" #ToStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street" required>
</ion-input>
This way all fields are unique.

Answer 2

This line of code:
[ngModelOptions]="{standalone: true}"
Is telling the form that your input element is NOT included as part of the form's data. You only want to do that with controls that you don't want to track on submittal. For example, say you have a checkbox that simply opens or closes a part of the user interface. You don't want that part of the submitted data, so you would use the standalone option so it "stands alone" from the form and its data.