Chrome auto-complete doesn't work partly

My form has a first name, last name, email address, city, state, country, and zip code.

The same angular code is deployed to Prod, Stage, Dev, and Local.

I am accessing all of these URLs in the same Chrome browser. Autofill works great in Local and Prod. But he only fills in the first and last name in Dev and Stage and will have to select an email to fill in the rest.

Also it works weird.

At the stage, when choosing the first name from autocomplete, only the first name is filled in and when choosing the last name from autocomplete, all fields (except firstName) are filled.

In Dev, when you select the first name from autocomplete, the first and last name are filled in, and when you select email from autocomplete, all fields are filled (except firstName and last name).

Is there anything to check?

HTML from check item ...

<form id="signup-form" novalidate="" name="myinfoForm" class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-valid-email" style=""> <div id="form-template-myinfo"> <div class="panel"> <div class="panel-body"> <div ng-include="" src="'/app/components/personal/info.html'" class="" style=""><div id="myinfo" on-rendered="info1Variation"> <div class="info_container"> <div class="well well-lg invisible-box col-sm-12 col-md-8 col-lg-8" ng-class="singlePageApp.isEnabled?'col-md-12 col-lg-12':'col-md-8 col-lg-8'"> <text-input ng-if="!multifieldEnabled" input-field-classes="text-ellipsis" class="input-field" type="text" name="firstName" belongs-to="" min-length="2" max-length="40" placeholder="First Name" validation="regExpression.name" model="firstName" require="true" focus="true" input-id="firstName" messages="errorMessages.firstNameRedesign" field="First Name (Primary)" sub-directive="valid-name-chars"><div class="field-container strip-sides-paddings" ng-class="fieldWidth"> <div class="text-input"> <div class="wrapper" id="wrapper_firstName"> <li> <label for="field_firstName" ng-class="fieldLabel" class="hide-label" style="">First Name</label> <input type="text" placeholder="First Name" name="firstName" id="field_firstName" ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()" valid-name-chars="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" minlength="2" maxlength="40" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength text-ellipsis ng-touched is-invalid" required="required" style=""> <span ng-if="fieldClass == 'is-valid' || fieldClass == 'is-invalid' || fieldClass == 'is-invalid-touched'" class="text-input-validation" style=""> <img ng-if="fieldClass == 'is-invalid' || fieldClass == 'is-invalid-touched'" src="/images/is-invalid.png"> </span> </li> <div ng-if="fieldClass == 'is-invalid' || fieldClass == 'is-invalid-touched'" ng-messages="myForm[name].$error" class="ng-active" style=""> <div ng-repeat="errorMessage in messages"> <div class="ll_error" field="First Name (Primary)" ng-message-exp="errorMessage.type"></div> </div><div ng-repeat="errorMessage in messages"> </div><div ng-repeat="errorMessage in messages"> </div> </div> </div> </div> </div> </div> </text-input> <text-input ng-if="!multifieldEnabled" input-field-classes="text-ellipsis" class="input-field" type="text" belongs-to="" name="lastName" min-length="2" max-length="40" placeholder="Last Name" validation="regExpression.name" model="lastName" require="true" messages="errorMessages.lastNameRedesign" field="Last Name (Primary)" sub-directive="valid-name-chars"><div class="field-container strip-sides-paddings" ng-class="fieldWidth"> <div class="text-input"> <div class="wrapper" id="wrapper_lastName"> <li> <label for="field_lastName" ng-class="fieldLabel" class="hide-label" style="">Last Name</label> <input type="text" placeholder="Last Name" name="lastName" id="field_lastName" ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()" valid-name-chars="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" minlength="2" maxlength="40" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis" required="required" style=""> </li> </div> </div> </div> </text-input> <text-input ng-if="formFieldCtrl.yi1.showFieldEmail" input-field-classes="text-ellipsis" class="input-field" belongs-to="" type="email" name="emailAddress" placeholder="Email Address" sub-directive="email-field-validation::no-spaces" input-id="inputEmail" validation="regExpression.email" model="emailAddress" require="true" start-validation-func="startEmailValidation()" end-validation-func="endEmailValidation()" messages="errorMessages.emailErrorMessagesRedesign" field="E-mail (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth"> <div class="text-input"> <div class="wrapper" id="wrapper_emailAddress"> <li> <label for="field_emailAddress" ng-class="fieldLabel" class="hide-label" style="">Email Address</label> <input type="email" placeholder="Email Address" name="emailAddress" id="field_emailAddress" ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()" email-field-validation="" no-spaces="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" minlength="" maxlength="" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis ng-valid-email" required="required" style=""> </li> </div> </div> </div> </text-input> <div ng-if="formFieldCtrl.yi1.showFieldAddress &amp;&amp; !singlePageApp.isEnabled"> <text-input ng-if="!isAutoAddressYourInfo" input-field-classes="text-ellipsis" class="input-field" type="text" belongs-to="" name="street1" placeholder="Address 1" validation="regExpression.address" model="street1" min-length="2" require="true" messages="errorMessages.street1Redesign" parent-model="primaryMember" field="Street 1 (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth"> <div class="text-input"> <div class="wrapper" id="wrapper_street1"> <li> <label for="field_street1" ng-class="fieldLabel" class="hide-label" style="">Address 1</label> <input type="text" placeholder="Address 1" name="street1" id="field_street1" ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()" nested-directive="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis" required="required" style=""> </li> <!-- ngIf: fieldClass == 'is-invalid' || fieldClass == 'is-invalid-touched' --> </div> </div> </div> </text-input> <text-input input-field-classes="text-ellipsis" class="input-field" type="text" belongs-to="" name="street2" placeholder="Apt, Suite, Bldg - Optional" validation="regExpression.address2" model="street2" messages="errorMessages.street2Redesign" field="Street 2 (Optional)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth"> <div class="text-input"> <div class="wrapper" id="wrapper_street2"> <li> <label for="field_street2" ng-class="fieldLabel" class="hide-label" style="">Apt, Suite, Bldg - Optional</label> <input type="text" placeholder="Apt, Suite, Bldg - Optional" name="street2" id="field_street2" ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()" nested-directive="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" ng-required="" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis ng-valid-required" style=""> </li> </div> </div> </div> </text-input> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <text-input class="input-field" input-field-classes="text-ellipsis" type="text" belongs-to="" name="city" placeholder="City" min-length="2" max-length="25" validation="regExpression.city" model="city" require="true" messages="errorMessages.cityRedesign" sub-directive="only-letters" field="City (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth"> <div class="text-input"> <div class="wrapper" id="wrapper_city"> <li> <label for="field_city" ng-class="fieldLabel" class="hide-label" style="">City</label> <input type="text" placeholder="City" name="city" id="field_city" ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()" only-letters="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty text-ellipsis" required="required" style=""> </li> </div> </div> </div> </text-input> </div> <div id="state-col" class="col-xs-6 col-sm-6 col-md-3 col-lg-3 strip-left-pad"> <text-input class="input-field" type="text" belongs-to="" name="states" placeholder="State" max-length="2" validation="regExpression.states" sub-directive="to-uppercase::only-letters" model="stateCode" require="true" messages="errorMessages.stateRedesign" field="State (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth"> <div class="text-input"> <div class="wrapper" id="wrapper_states"> <li> <label for="field_states" ng-class="fieldLabel" class="hide-label" style="">State</label> <input type="text" placeholder="State" name="states" id="field_states" ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()" to-uppercase="" only-letters="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty" required="required" style=""> </li> </div> </div> </div> </text-input> </div> <div id="zip-col" class="col-xs-6 col-sm-6 col-md-3 col-lg-3 strip-left-pad"> <text-input class="input-field" type="tel" name="postalCode" belongs-to="" placeholder="Zip Code" min-length="5" max-length="5" validation="regExpression.zip" model="postalCode" require="true" messages="errorMessages.postalCodeRedesign" sub-directive="only-number" field="Postal Code (Primary)"><div class="field-container strip-sides-paddings" ng-class="fieldWidth"> <div class="text-input"> <div class="wrapper" id="wrapper_postalCode"> <li> <label for="field_postalCode" ng-class="fieldLabel" class="hide-label" style="">Zip Code</label> <input type="tel" placeholder="Zip Code" name="postalCode" id="field_postalCode" ng-model="model" ng-focus="onFocus()" ng-blur="onBlur()" only-number="" ng-class="[fieldClass, fieldWidth, inputFieldClasses]" ng-required="true" ng-trim="false" ng-disabled="disable" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength is-empty" required="required" style=""> </li> </div> </div> </div> </text-input> </div> </div> </div> </div> </div> </div></div> </div> </div> <div class="panel-footer"> <div class="row"> <button type="submit" ng-click="saveDetails()" role="button">Save </button> </div> </div> </div> </form> 

thanks

+7
javascript angularjs google-chrome autofill
source share
1 answer

Add an additional attribute to your input tag, e.g.

 autocomplete="name" autocomplete="email" autocomplete="tel" 

etc. .... in your html code.

Please refer to this document for more details:

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

This document will help you fix the problem.

+4
source share

All Articles