Tengo un problema al usar formControlName en Mat-Autocomplete. No sé por qué pero mi formControlName no enviará los datos, ¿estoy equivocado? Cuando intento eliminar [formControl] de HTML, siempre no se puede filtrar.

Html

<form [formGroup]="form" #legalDataFrm="ngForm" autocomplete="off" fxLayout.gt-sm="column" fxFlex="1 1 auto" novalidate>
  <input type="text" placeholder="Pilih Bank" 
    formControlName="bankName" matInput 
    [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete 
    #auto="matAutocomplete" 
    (optionSelected)='onChangeBank()' 
    [displayWith]="displayFn">
      <mat-option>Pilih Bank</mat-option>
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.bankName}}
      </mat-option>
    </mat-autocomplete>
</form>

TS _bankService es donde obtengo la lista de bancos, _validationService es donde obtengo la validación para cada nombre de formulario.

export class FpLegalDataFormComponent implements OnInit, OnDestroy {
form: FormGroup;
myControl = new FormControl();
options: User[];
filteredOptions: Observable<User[]>;

constructor(
private activatedRoute: ActivatedRoute,
private formBuilder: FormBuilder,
public _validationsService: ValidationsService,
public _bankService: BankService
) {
}
 this.form = this.formBuilder.group({
  bankName      : [bankName, Validators.required]
});
displayFn(user?: User): string | undefined {
return user ? user.bankName : undefined;
}

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

 return this.options.filter(option => 
 option.bankName.toLowerCase().indexOf(filterValue) > -1);
 }
 private initDropdown() {
 this._bankService.getBank().then((response) => {
   console.log(response.data.bankList)
   this.options = response.data.bankList;
   console.log(this.options)
   this.filteredOptions = this.myControl.valueChanges
   .pipe(
     startWith<string | User>(''),
     map(value => typeof value === 'string' ? value : value.bankName),
     map(name => name ? this._filter(name) : this.options.slice())
   );
 })
}
1
yudistira nugraha 10 may. 2019 a las 11:26

3 respuestas

La mejor respuesta

En primer lugar, es bueno inicializar el control de formulario, así que en lugar de:

this.form = this.formBuilder.group({
  bankName      : [bankName, Validators.required]
});

Uso

this.form = this.formBuilder.group({
  bankName: new FormControl(bankName, Validators.required)
});

Y para solucionar el problema en lugar de

<input type="text" placeholder="Pilih Bank" 
    formControlName="bankName" matInput 
    [formControl]="myControl" [matAutocomplete]="auto">

Uso

<input type="text" placeholder="Pilih Bank" matInput 
    [formControl]="form.get('bankName')" [matAutocomplete]="auto">

Debería solucionar su problema.

0
Riccardo Turri 10 may. 2019 a las 08:48

Html

<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>```

TS File
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];
0
Er Abdul Meman 10 may. 2019 a las 09:17

Ts:

public form: FormGroup = this.formBuilder.group({
    control: [undefined, [Validators.required]],
});
//
this.filtered = this.signupForm.controls.control.valueChanges.pipe(...);

Html:

<mat-form-field>
        <input type="text"
               matInput
               [matAutocomplete]="auto"
               formControlName="control">
        <mat-autocomplete autoActiveFirstOption
                          #gymAuto="matAutocomplete"                      
(optionSelected)="form.controls.control.setValue($event.option.value)">
          <mat-option *ngFor="let option of filtered | async"
                      [value]="option">
            {{option.name}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
0
Zahema 11 oct. 2019 a las 09:29