I have an app built in Angular 5 using Firebase's Real Time Database. My form is using ngModel and has a user id field and a custom username field. I need the username to have a default value of the user id unless the user chooses to change it.
<label class="label-control" for="idInput">User Name</label>
<input id="userId" type="text" for="idInput" class="form-control"
required minlength="1" name="userId"
[(ngModel)]="userData.userId"
#userId="ngModel"
placeholder="e.g. johnhancock1776"
/>
<label class="label-control" for="vanityInput">Your Custom URL</label>
<input id="vanityId" type="text"
for="vanityInput"
class="form-control"
name="vanityId"
[(ngModel)]="userData.vanityId"
value="{{userData.userId}}"
#vanityId="ngModel"
placeholder="custom url" />
When the user puts In their user id the vanity id field populates but won't send data to the database unless they add or delete something from the vanity field.
I tried adding:
[ngModelOptions]="{updateOn: 'submit'}"
to the vanity field witch lets it send an empty string if neither field is touched, but won't send anything when only the user id is changed.