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())
);
})
}
3 respuestas
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.
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'
];
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>
Preguntas relacionadas
Nuevas preguntas
angular
Preguntas sobre Angular (que no debe confundirse con AngularJS), el marco web de Google. Use esta etiqueta para preguntas angulares que no son específicas de una versión individual. Para el marco web anterior de AngularJS (1.x), use la etiqueta angularjs.