Question

我正在使用Angular CLI。而且我想制作一个自动填充的表格，该表格可以显示所有值（不像angular.io的示例以``开始于''）。

我设法使其与[formControl]一起使用，但我想将其插入FormGroup中。因此，我认为将其与formControlName（同时使用formControlName和[formControl]）一起使用意味着我没有从表单中获取值。

这是我当前的代码，过滤器上有问题。谢谢您的帮助

component.html ：

<form [formGroup]="tumeurForm" (ngSubmit)="onSubmitForm()">
  <mat-form-field appearance="outline">
    <mat-label>Diagnostic : inscription de la tumeur</mat-label>
    <input
      matInput 
      type="text" 
      formControlName="localisation"
      [matAutocomplete]="auto"/>
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

component.ts ：

export class DiagnosticDialogComponent implements OnInit  {

  options = [
    "(C00) Néoplasie maligne de la lèvre",
    "(C00.0) Lèvre supérieure, bord libre",
    "(C00.1) Lèvre inférieure, bord libre"
  ];

  patientid: string;
  public tumeurForm: FormGroup ;
  filteredOptions: Observable<string[]>;


  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.initForm();
    this.filteredOptions = this.tumeurForm.valueChanges.pipe(
      startWith(""), 
      map(val => this.filter(val))
    );
  }

  filter(val: string): string[] {
    return this.options.filter(option => {
      return option.toLowerCase().match(val.toLowerCase());
    });
  }

  initForm() {
    this.tumeurForm = this.formBuilder.group({
      localisation: ['', Validators.required]
    });
  }

  onSubmitForm() {
    const localisation = this.tumeurForm.get('localisation').value;
    const Patientid = this.patientid;
    const newDiagnostic = new Diagnostic(localisation, Patientid);
    this.diagnosticsService.CreateDiagnostic(newDiagnostic);
  }
}

Answer 1

（如果我正确理解了问题）

您正在FormGroup的{{1}}处进行管道传输。但是您需要在.valueChanges上进行此操作。

所以不是

FormControl

执行此操作：

this.filteredOptions = this.tumeurForm.valueChanges.pipe(
  startWith(""), 
  map(val => this.filter(val))
);

FormGroup CustomFilter

1 个答案: