Я использовал https://stackblitz.com/edit/angular-combobox-autocomplete для создания выпадающего списка. Я успешно реализовал это в своем приложении.
Но я сталкиваюсь с несколькими проблемами, настраивая его, так как мне нужно, чтобы мало чего нужно было реализовать вthis
1) Я интегрирую этот комбинированный список в форму, в которой я использую formGroup и formControlName с каждым полем ввода для проверки и получения значения определенного поля
Как, например, давайте покажем мне мой код,У меня есть один HTML-файл, где мои поля формы похожи на это. Меня интересует, как использовать formControlName в компоненте app-combo-box. Поскольку я не могу получить выбранную организацию или идентификатор в моем formBuilder или каким-либо другим способом, чтобы я мог получить название выбранной страны или Id
<form [formGroup]="orgViewUpdateform" class="orgAddPanel" (ngSubmit)="onSubmit()" >
<div class="col-md-12 col-sm-12 col-lg-12">
<div>
<div class="col-md-12 col-sm-12 col-lg-12 orgdetailblk">
<div class="row">
<div class="col-sm-12 orgdetail1">Name of the organisation</div>
<div class="col-sm-12 orgdetail2">
<mat-form-field>
<input matInput type="text" placeholder="" formControlName="organisation_name"
class="form-control secondinput" id="organisation_name" [ngClass]="{ 'is-invalid': submitted && f.organisation_name.errors }"
value="{{organisationRecord?.organisation_name}}">
<div *ngIf="submitted && f.organisation_name.errors" class="invalid-feedback">
<mat-error *ngIf="f.organisation_name.errors.required">Field is required</mat-error>
<mat-error *ngIf="f.organisation_name.errors.minlength">atleast 2 characters required</mat-error>
<mat-error *ngIf="f.organisation_name.errors.maxlength">max 255 characters allowed</mat-error>
</div>
</mat-form-field>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-lg-12">
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5 orgdetailblk cntry">
<div class="col-sm-12 orgdetail1 ">Country</div>
<div class="col-sm-12 orgdetail2">
<app-combo-box [list]="countryNames"></app-combo-box>
</div>
</div>
<div class="col-md-2 col-sm-2 col-lg-2"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-lg-12">
<div class="row">
<div class="col-sm-12 organisation">
<span class="orgedit">
<button type="reset" (click)="onReset()">Cancel</button>
<button mat-button >Save</button>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
Это мой код .ts файла, где я использую formBuilder
this.orgViewUpdateform = this.formBuilder.group({
organisation_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(255)]],
organisation_country: []
});
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.orgViewUpdateform.invalid) {
return;
}
this.organisationService.create(this.orgViewUpdateform.value).subscribe(
success => {
alert('org added successfully');
},
error => {
},
);
// display form values on success
// alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.orgViewUpdateform.value, null, 4));
}
Теперь мне нужно получить поле organisation_country в this.orgViewUpdateform.value. Пожалуйста, дайте мне знать, если требуется какая-либо другая информация. Заранее спасибо