如何在Angular中使用Angular Material使用浏览器的表单数据值

编程问答 2022-07-23

问题描述

我一直试图在Angular App中使用浏览器的form-data选项，但无法正常工作。

它仅存储first user input，但浏览器无法记住以后的第二个输入...，

这是我的代码中的stackblitz。

<form [formGroup]="myForm">
    <mat-form-field hintLabel="Max 50 characters" appearance="fill">
        <mat-label>Name</mat-label>
    
        <input matInput #input2 formControlName="myName" id="myName" name="myName" maxlength="50" autocomplete="on">

        <mat-hint align="end">{{input2.value?.length || 0}}/50</mat-hint>
    </mat-form-field>
</form>

我尝试了什么？

id="myName" name="myName" autocomplete="on"

我还应该使用什么？

解决方法

您可以指定自动完成的值，而不只是'on'：

autocomplete="name"

以下内容提示我自动填写我的全名： https://stackblitz.com/edit/angular-mat-input-nboebn?file=src%2Fapp%2Fapp.component.html

有关您可以提供的值的完整列表，请参见：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

angularangularangular-materialangular10