<app-banner title="Search Accompagnant"></app-banner>

<div class="site-section">
<div class="container">
<div class="row">
<form [formGroup]="searchForm">
<div class="form-group">
Adress : <input type="text" class="form-control"
formControlName="adress"
placeholder="Insert your Adress Please">
</div>
<div
*ngIf="searchForm.controls['adress'].invalid &&
(searchForm.controls['adress'].touched ||searchForm.controls['adress'].dirty)
">
<div *ngIf="searchForm.controls['adress'].errors.required"
class="red"> Address is required
</div>
</div>
<div class="form-group">
Experience :
<select class="form-select" aria-label="Default select
example" formControlName="experience">
<option value="2">Moins d'un an</option>
<option value="3">entre 1 et 2 ans</option>
<option value="4">entre 2 et 5 ans</option>
<option value="5">entre 5 et 10 ans</option>
<option value="6">Plus de 10 ans</option>
</select>
</div>
<div class="form-group">
<button (click)="search()" [disabled]="searchForm.invalid"
class="btn btn-primary py-3 px-5">Search</button>
</div>
</form>
</div>
<div *ngFor="let m of accom">
<app-accompagnant [accompagnantInput]="m"></app-accompagnant>
</div>
<div *ngIf="accom?.length==0" style="color: red;">
Not Founded Accompagnant
</div>
</div>
</div>
import { UserService } from 'src/app/services/user.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-search-accompagnants',
templateUrl: './search-accompagnants.component.html',
styleUrls: ['./search-accompagnants.component.css']
})
export class SearchAccompagnantsComponent implements OnInit {
searchForm:FormGroup;
accom:any;
constructor(private formBuilder: FormBuilder,private
userService:UserService) { }

ngOnInit() {
this.searchForm=this.formBuilder.group(
{
adress: ["", [Validators.required]],
experience:[""]
})
}
search(){
console.log("here",this.searchForm.value)
this.userService.searchAccomp(this.searchForm.value).subscribe(
(data)=>{
console.log("here finded accompagnant", data.accom);
this.accom=data.accom
}
)

}
}