Блог

Автозаполнение запускается отдельно для выставления счетов и для получения контактной информации.

Например, когда я нажимаю на любое из следующих 4 заполнений, оно предлагает автозаполнение для них => имя, фамилия, номер телефона и адрес электронной почты. Когда я нажимаю на любой из следующих 4, он запускает автозаполнение для них вместе => адрес для выставления счетов, почтовый индекс для выставления счетов, страна выставления счетов, город выставления счетов.

Автозаполнение хорошо работает для каждой из двух групп, но я хочу, чтобы это была одна группа, которая будет автоматически заполняться, выбрав любое из 8 полей ввода.

Пример кода (я использую Angular 8 с компонентами Material design, но я думаю, что это не должно отвлекать, так как я рассматриваю это как проблему HTML):

 <form method="post" id="paymentForm" [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form" >

    <div class="customer-info">
        <div class="customer-info-personal">
            <div>
                <mat-form-field class="form-element">
                    <input name="fname" matInput placeholder="Ime" formControlName="firstName" autocomplete="given-name" form="paymentForm">
                    <mat-error
                        *ngIf="!formGroup.controls['firstName'].valid amp;amp; formGroup.controls['firstName'].touched">
                    </mat-error>
                </mat-form-field>
                <mat-form-field class="form-element">
                    <input name="lname" matInput placeholder="Prezime" formControlName="lastName" autocomplete="family-name" form="paymentForm">
                    <mat-error *ngIf="!formGroup.controls['lastName'].valid amp;amp; formGroup.controls['lastName'].touched">
                    </mat-error>
                </mat-form-field>
                
                <mat-form-field class="form-element">
                    <input name="bill-address" matInput placeholder="Adresa" formControlName="billingAddress" autocomplete="billing street-address" form="paymentForm">
                    <mat-error *ngIf="!formGroup.controls['billingAddress'].valid amp;amp; formGroup.controls['billingAddress'].touched">
                    </mat-error>
                </mat-form-field>

                <mat-form-field class="form-element">
                    <input name="bill-city" matInput placeholder="Grad" formControlName="billingCity" autocomplete="billing address-level2" form="paymentForm">
                    <mat-error *ngIf="!formGroup.controls['billingCity'].valid amp;amp; formGroup.controls['billingCity'].touched">
                    </mat-error>
                </mat-form-field>
            </div>
            <div>
                <mat-form-field class="form-element">
                    <input name="bill-zip" matInput placeholder="Poštanski broj" formControlName="billingPostalNumber" autocomplete="billing postal-code" form="paymentForm">
                    <mat-error
                        *ngIf="!formGroup.controls['billingPostalNumber'].valid amp;amp; formGroup.controls['billingPostalNumber'].touched">
                    </mat-error>
                </mat-form-field>
                <mat-form-field class="form-element">
                    <input name="bill-country" matInput placeholder="Država" formControlName="billingCountry" autocomplete="billing country" form="paymentForm">
                    <mat-error *ngIf="!formGroup.controls['billingCountry'].valid amp;amp; formGroup.controls['billingCountry'].touched">
                    </mat-error>
                </mat-form-field>
                <mat-form-field class="form-element">
                    <input name="email" matInput placeholder="e-mail" formControlName="email" autocomplete="email" type="email" form="paymentForm">
                    <mat-error *ngIf="!formGroup.controls['email'].valid amp;amp; formGroup.controls['email'].touched">
                    </mat-error>
                </mat-form-field>
                <mat-form-field class="form-element">
                    <input name="phone" matInput placeholder="Broj telefona" formControlName="phoneNumber" autocomplete="tel" type="tel" form="paymentForm">
                    <mat-error
                        *ngIf="!formGroup.controls['phoneNumber'].valid amp;amp; formGroup.controls['phoneNumber'].touched">
                    </mat-error>
                </mat-form-field>
            </div>

        </div>
        <div class="buttons-element">
            <div class="pay-button-element">
                <button mat-raised-button color="primary" type="submit" class="button"
                    [disabled]="!formGroup.valid">Plati</button>
            </div>
            <div class="cancel-button-element">
                <button mat-button color="secondary" type="submit" class="button">Odustani</button>
            </div>
        </div>
    </div>
</form> ```
 

Исправил это, удалив слово billing из значений автозаполнения и bill- из значений имени.

Напр.

До autocomplete="billing postal-code" name="zip"

До autocomplete="postal-code" name="zip"

Одного изменения поля автозаполнения оказалось достаточно.