mat-autocomplete FormGroup 需要输入问题答案

【问题标题】：mat-autocomplete FormGroup required input issuemat-autocomplete FormGroup 需要输入问题
【发布时间】：2020-03-21 04:06:49
【问题描述】：

好吧，我一直在尝试将mat-autocomplete 添加到我的表单中，当终于开始对我有用时，这个小问题突然出现，因为背部疼痛，这被认为是我的障碍。

我希望mat-autocomplete 输入是必需的，它是必需的。但问题是，当我在输入中插入一个值时，表单不会更改为有效，即使我为其添加了一个值，它也会一直告诉我国籍是必需的。我无法继续进行下一个水平步骤。

我试图找出原因，但我失败了，我觉得解决方案会变成一个虚拟的解决方案，但长时间工作会使事情变得模糊，你们都知道。

帮助大家

这是我的<mat-form-field>

<mat-form-field appearance="outline" class="pl-sm-8" fxFlex="50">
    <input matInput placeholder="Nationality *" aria-label="Nationality *" formControlName="nationalitySelect"
            [matAutocomplete]="auto" [formControl]="nationalitySelect" required>
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let nationality of filteredNationalities | async" (onSelectionChange)="nationalityOnChange($event,nationality)"
                [value]="nationality.name">
                <span>{{nationality.name}}</span>
            </mat-option>
        </mat-autocomplete>
    <mat-error>Nationality is required!</mat-error>
</mat-form-field>

这是我的打字稿代码

personalDetailsStep: FormGroup;
nationalitySelect: FormControl = new FormControl();

ngOnInit(): void {

    // Horizontal Stepper form steps
    this.personalDetailsStep = this._formBuilder.group({
        nationalitySelect: ['', Validators.required],
    });
}

filterNationalities() {
    let me = this;
    me.filteredNationalities =  me.personalDetailsStep.controls["nationalitySelect"].valueChanges.pipe(
        startWith(''),
        map(nationality => nationality ? this._filteredNationalities(nationality) : this.nationalities.slice())
    );
}

private _filteredNationalities(value: string): Observable<any>[]{
    const filterValue = value.toLowerCase();

    return this.nationalities.filter(nationality => nationality.name.toLowerCase().indexOf(filterValue) === 0);
}
nationalityOnChange(e, value){
    let me = this;
    if(e.isUserInput){
        me.newEmployee.NationalityId = value.id;
    }
}

请注意，我在该特定代码中向您发送了我的整个代码的一部分组件，所以如果您看到任何丢失的东西，请告诉我。我试过我的最好展示你需要帮助的一切

感谢您的支持

【问题讨论】：

标签： angular angular-material

【解决方案1】：

尝试以下方法：

<div [formGroup]="personalDetailsStep">
  <mat-form-field appearance="outline" class="pl-sm-8" fxFlex="50">
    <input matInput placeholder="Nationality *" 
                    aria-label="Nationality *" 
                    formControlName="nationalitySelect"
                    [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let nationality of filteredNationalities | async" 
                    (onSelectionChange)="nationalityOnChange($event,nationality)"
                    [value]="nationality.name">
            <span>{{nationality.name}}</span>
        </mat-option>
      </mat-autocomplete>
    <mat-error>Nationality is required!</mat-error>
  </mat-form-field>
</div>

【讨论】：

这不起作用。我想了一会儿我会发布的解决方案

【解决方案2】：

对我有用的解决方案是；

HTML 文件：

<mat-form-field appearance="outline" class="pl-sm-8" fxFlex="50">
    <input matInput placeholder="Nationality *" aria-label="Nationality *" formControlName="nationalitySelect"
            [matAutocomplete]="auto" required>
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let nationality of filteredNationalities | async" (onSelectionChange)="nationalityOnChange($event,nationality)"
                [value]="nationality.name">
                <span>{{nationality.name}}</span>
            </mat-option>
        </mat-autocomplete>
    <mat-error>Nationality is required!</mat-error>
</mat-form-field>

打字稿文件：

personalDetailsStep: FormGroup;
nationalitySelect: FormControl = new FormControl();

ngOnInit(): void {

    // Horizontal Stepper form steps
    this.personalDetailsStep = this._formBuilder.group({
        nationalitySelect: this.nationalitySelect,
    });
}

filterNationalities() {
    let me = this;
    me.filteredNationalities =  me.nationalitySelect.valueChanges.pipe(
        startWith(''),
        map(nationality => nationality ? this._filteredNationalities(nationality) : this.nationalities.slice())
    );
}

private _filteredNationalities(value: string): Observable<any>[]{
    const filterValue = value.toLowerCase();

    return this.nationalities.filter(nationality => nationality.name.toLowerCase().indexOf(filterValue) === 0);
}
nationalityOnChange(e, value){
    let me = this;
    if(e.isUserInput){
        me.newEmployee.NationalityId = value.id;
    }
}

【讨论】：