我有一个前端,我想使用ng-option从下拉列表中进行选择,然后使用搜索按钮搜索mrn。
component.html
<form class="form-inline" (ngSubmit)="ngOnInit()" #f="ngForm">
<mat-form-field>
<mat-label>Search MRN</mat-label>
<mat-select>
<mat-option *ngFor="let SearchMRN of mrn " [value]="SearchMRN.value">
{{ SearchMRN.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<button type="submit" [disabled]="!f.valid" color="accent">
<mat-icon>search</mat-icon> Search</button>
</form>
component.ts
export interface MRNSearch {
value: string;
viewValue: string;
}
mrn: MRNSearch[] = [
{value: 'smart-1685497', viewValue: 'smart-1685497'},
{value: 'smart-1685437', viewValue: 'smart-1685437'},
{value: 'smart-5485497', viewValue: 'smart-5485497'}
];
@ViewChild('f', null) form: NgForm;
async ngOnInit() {
if (!this.form.valid) {
return;
}