Angular Material matautocomplete 实际选择值答案

【问题标题】：Angular Material matautocomplete actually select the valueAngular Material matautocomplete 实际选择值
【发布时间】：2018-08-03 17:30:24
【问题描述】：

我遇到了一个问题，即表单在自动填充后没有选择值。

它确实会自动填充状态，但它似乎没有被选中，因为我在使用 [Validators.required] 时收到的表单无效。

想知道是否有办法实际选择输入值。

component.html

       <mat-form-field>
             <input type="text" placeholder="State" matInput formControlName="state"
            [matAutocomplete]="auto" required>
                <mat-autocomplete #auto="matAutocomplete" dropdown-arrow="true" (optionSelected)="state.name">
                    <mat-option *ngFor="let state of states" [value]="state.name">{{state.name}}</mat-option>
                </mat-autocomplete> 
        </mat-form-field>

组件.ts

    this.shippingForm = this.formBuilder.group({
        userName: [''],
        password: [''],
        firstName: ['', [Validators.required]],
        lastName: ['', [Validators.required]],
        address1: [],
        address2: [],
        city: [, [Validators.required]],
        country: ['',  [Validators.required]],
        postalCode: [,  [Validators.required]],
        state: [,  [Validators.required]],
        phone: [,  [Validators.required]],
        email: [,  [Validators.required, Validators.email]],
    });

【问题讨论】：

你能发布你的验证器吗？
@AnyMoose 我已经添加了验证器。谢谢
可能是这个问题的副本...stackoverflow.com/questions/44668289/…
“自动填充”是什么意思？您的意思是在没有用户输入的情况下填充值（即在代码中）？显示该代码。
抱歉不够具体。自动填充，就像使用 chrome 生成输入字段一样。因此，一旦您单击 firstName，它将为您自动填写所有表单输入。它确实填充了选项字段，但是当我提交包含选项值的输入为空时。

标签： angular forms angular-material

【解决方案1】：

<mat-autocomplete #auto="matAutocomplete" dropdown-arrow="true" (optionSelected)="getStateName($event.option.value)">

在optionSelect() 上调用一个函数并尝试查看console.log() 或alert() 中的值是什么。一旦，我们有了价值，就可以进一步操纵它

【讨论】：

OK 看起来像是在单击选择选项时打印值。但是当使用自动填充时，它只是填充值，但似乎并没有实际选择值，因为我没有打印任何东西。
如果它能够打印选项的值，那么这个值可以分配给组件私有变量
是的。如果我手动选择它，它将打印该值。但是，如果我要从一开始就自动填充，它就不会打印。所以不确定是否有办法在使用自动填充时自动选择。
是的，我相信这就是材料自动完成的结构和实现方式访问material.angular.io/components/autocomplete/examples@Yh1234