Chrome autofill not working partially

Question

I have Firstname, Lastname, Email, City, State, Country & Zip in my form.

The same angular code is been deployed in Prod, Stage, Dev & Local.

I am accessing all these URL's in same Chrome browser. Autofill works perfectly in Local & Prod. But, it fills only First & Last name in Dev and Stage and will have to select email so as to fill the rest.

Also its working weirdly.

In stage, on Selecting firstname from autofill, only first name gets filled and on Selecting lastName from autofill all the fields(except firstName) gets filled.

In Dev, on Selecting firstname from autofill, first name and last name gets filled and on Selecting email from autofill all the fields(except firstName & last name) gets filled.

Is there anything to be checked?

HTML code from inspect element ...

<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

Answer 1

Please add following attribute in your input tag like

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

etc.... in your html code.

Please refer this document for more details:

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

This document will help you to fix the issue.