Question

好吧，我一直在尝试向表单中添加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;
    }
}

请注意，我已向您发送了部分完整代码，组件，所以如果您看到任何丢失的东西，请告诉我。我试过了最好显示您需要帮助的所有内容

感谢您的光临

Answer 1

对我有用的解决方案是；

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;
    }
}

Answer 2

尝试以下操作：

<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>

mat-autocomplete FormGroup必需的输入问题

2 个答案: