首页 文章

分离组件中的Angular表单元素会给出FormGroup错误

提问于
浏览
0

我有一个使用Angular Material制作的表单元素,它是一个自动完成的国家/地区选择框:

<mat-form-field>
  <input type="text" placeholder="Country" aria-label="Number" matInput formControlName="country" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

ngOnInit 中,我调用了一个API,这会填充filteredOptions .

由于我将以多种形式使用此选择器,因此我想制作它的一个组件 . 一旦我将代码移动到我得到的组件:

SelectCountryComponent.html:2 ERROR错误:formControlName必须与父formGroup指令一起使用 . 您将要添加formGroup指令并将其传递给现有的FormGroup实例(您可以在类中创建一个) .

即使我在FormGroup中使用我的组件,它仍然会出现此错误 . 创建包含formControl的组件的正确方法是什么?

select-country.component.ts

@Component({
  selector: 'app-select-country',
  templateUrl: './select-country.component.html',
  styleUrls: ['./select-country.component.css']
})
export class SelectCountryComponent implements OnInit {

  countryFormGroup = new FormGroup({
    country: new FormControl('')
  });

  options: Country[];
  filteredOptions: Observable<Country[]>;

  constructor(public api: ApiService) {

  }

  ngOnInit() {

    this.api.get('country').subscribe(res => {
      console.log(res);
      this.options = res;
      this.filteredOptions = this.countryFormGroup.get('country').valueChanges.pipe(
        startWith<string | Country>(''),
        map(value => (typeof value === 'string' ? value : value['name'])),
        map(name => name ? this._filter(name) : this.options ? this.options.slice() : [])
      );
    });

  }

  displayFn(country?: Country): string | undefined {
    return country ? country.name : undefined;
  }

  private _filter(name: string): Country[] {
    const filterValue = name.toLowerCase();

    return this.options.filter(
      option => option.name.toLowerCase().indexOf(filterValue) === 0
    );
  }

}

select-country.component.html

<mat-form-field>
  <input type="text" placeholder="Country" aria-label="Number" matInput formControlName="country" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

2 回答

  • 1

    在你的情况下:

    <form [formGroup]="countryFormGroup" (ngSubmit)="onSubmit()">
      <mat-form-field>
        <input type="text" placeholder="Country" aria-label="Number" matInput formControlName="country" [matAutocomplete]="auto">
      </mat-form-field>
    </form>
    

    您需要通过 [formGroup]="countryFormGroup" 将countryFormGroup与表单绑定,并在其中使用 formControlName .

    为了使代码更清晰,您可以使用HTML中的管道过滤选项

  • 1

    使用[formGroup] = "countryFormGroup"将您的mat-form-field包装在 divform 中 . 您需要将实例化的formGroup绑定到模板 .

    <div [formGroup]="countryFormGroup">
    <mat-form-field>
      <input type="text" placeholder="Country" aria-label="Number" matInput formControlName="country" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
          {{ option.name }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
    </div>
    

相关问题