[英]Mat-AutoComplete in FormGroup CustomFilter
I am using Angular CLI. 我正在使用Angular CLI。 And I want to make an autocomplete form that looks in all values (unlike the example of angular.io that does a "start with").
而且我想制作一个自动填充的表单,该表单可以显示所有值(不像angular.io的示例以``开始于'')。
I managed to make it work with [formControl]
but I want to insert it into a FormGroup
. 我设法使其与
[formControl]
但我想将其插入FormGroup
。 So I think using it with formControlName
(using formControlName
and [formControl]
at the same time) meant that I did not get the value from my form. 因此,我认为将其与
formControlName
使用(同时使用formControlName
和[formControl]
)意味着我没有从表单中获取值。
Here is my current code with a problem on the filter. 这是我当前的代码,过滤器上有问题。 Thank you for your help
谢谢您的帮助
component.html : 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 : 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);
}
}
(if I understood the problem correctly) (如果我正确理解了问题)
You are piping at the FormGroup
's .valueChanges
. 您正在通过
FormGroup
的.valueChanges
。 But you need to do it on the FormControl
. 但是您需要在
FormControl
上执行此操作。
So instead of 所以代替
this.filteredOptions = this.tumeurForm.valueChanges.pipe(
startWith(""),
map(val => this.filter(val))
);
do this: 做这个:
this.filteredOptions = this.tumeurForm.controls['localisation'].valueChanges.pipe(
startWith(""),
map(val => this.filter(val))
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.