I'm working on updating receiver . When the user presses the edit button, a modal will open for him . this modal contains reactive form . i hava problm with selector HTML Code
<div class="form-group col">
<label>Groupes</label>
<mat-select formControlName="groups" class="form-control" [(ngModel)]="reciverToEdit.groups"
[ngClass]="{ 'is-invalid': submittedE && fE.groups.errors }" multiple>
<mat-option *ngFor="let group of groups" [value]="group">{{group.groupName}}</mat-option>
</mat-select>
</div>
TS Code :
editForm!:FormGroup;
groups!:SmGroup[];
reciverToEdit!:Receiver;
ngOnInit() {
this.initForms();
}
initForms(){
this.editForm = this.formBuilder.group({
idreceiver:['', Validators.required],
idAddress:['', Validators.required],
firstName: ['', Validators.required],
lastName: ['', Validators.required],
// validates date format yyyy-mm-dd
dob: ['', [Validators.required, Validators.pattern(/^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/)]],
email: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, Validators.minLength(6)]],
wilaya:[],
commune :[],
codepostal :['', Validators.required],
homeNumber :[''],
floor:[''],
street:[''],
city:['', Validators.required],
groups: [],
cat: ['', Validators.required],
genre: ['', Validators.required]
});
// to open update model
openModalUpdate(template: TemplateRef<any>, reciver: Receiver) {
this.reciverToEdit = reciver;
this.editForm.controls['idreceiver'].setValue(this.reciverToEdit.idreceiver)
this.editForm.controls['idAddress'].setValue(this.reciverToEdit.receiverAddress.idAddress)
this.modalRef = this.modalService.show(template,
Object.assign({}, { class: 'modal-lg' }) );
}
the result here
the selector not open or show any thing
i need help