This is my html
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-bordered">
<caption>
Lista de Aplicabilidades
<div class="float-right">
<input type="button" class="btn btn-success" (click)="onCreate()" value="+">
</div>
</caption>
<thead class="thead-dark">
<tr>
<th>Nome</th>
<th>Contexto</th>
<th>Tipo de Pagamento</th>
<th>Tipo de Entrega</th>
<th>MarketPlace</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let aplicabilidade of dataSource" [formGroup]="createForm">
<td>
<input formControlName="id" type="hidden">
<label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.name }}</label>
<label *ngIf="aplicabilidade.edit === true"><input formControlName="name" type="text"></label>
</td>
<td>
<label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.context }}</label>
<label *ngIf="aplicabilidade.edit === true"><input formControlName="context" type="text"></label>
</td>
<td>
<input formControlName="id" type="hidden">
<label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.typePaymentDetailsModel }}</label>
<label *ngIf="aplicabilidade.edit === true"><input formControlName="typePaymentDetailsModel" type="text"></label>
</td>
<td>
<label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.typeDeliveryDetailsModels }}</label>
<label *ngIf="aplicabilidade.edit === true">
<!-- <input formControlName="typeDeliveryDetailsModels" type="text"> -->
<mat-form-field>
<mat-select multiple formControlName="typePaymentDetailsModel" placeholder="Tipo de Pagamento" name="payment">
<mat-option *ngFor="let payment of dataSourcePayment" [value]="payment">
{{payment.name}}
</mat-option>
</mat-select>
</mat-form-field>
</label>
</td>
<td>
<label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.marketPlace }}</label>
<label *ngIf="aplicabilidade.edit === true"><input formControlName="marketPlace" type="text"></label>
</td>
<td>
<fa *ngIf="checkEdit()" name="pencil" (click)="initEditAplicabilidade(aplicabilidade)"></fa>
<fa *ngIf="aplicabilidade.edit === true" name="save" (click)="onUpdate()"></fa>
</td>
<td>
<fa *ngIf="checkEdit()" name="times" (click)="onDelete(aplicabilidade)"></fa>
<fa *ngIf="aplicabilidade.edit === true" name="ban" (click)="aplicabilidade.edit = null; initDefaultForm();"></fa>
</td>
</tr>
</tbody>
</table>
</div>
</div>
My Component
export class ApplicabilityComponent implements OnInit {
createForm: FormGroup;
public dataSource: Model.ApplicabilityItem[];
public dataSourcePayment: Model.TypePaymentItem[];
public dataSourceDelivery: Model.TypeDeliveryItem[];
public form:any;
constructor(private _applicabilityService: ApplicabilityService,
private builder: FormBuilder,
private route: Router) {}
ngOnInit() {
this.onGet();
this.initDefaultForm();
}
initDefaultForm() {
this.createForm = this.builder.group({
id: '',
name: '',
context: '',
typeDeliveryDetailsModels: '',
typePaymentDetailsModel: '',
marketPlace: false
});
}
onCreate(){
this.route.navigate(['create-aplicability']);
}
onDelete(aplicabilidade: Model.ApplicabilityItem) {
debugger;
if (confirm('Deseja excluir o operador: ' + aplicabilidade.name + '?')) {
this._applicabilityService
.delete<any>(aplicabilidade.id)
.subscribe((res) => {
this.onGet();
});
}
}
onGet(){
this._applicabilityService
.getAllAplicability<Model.Result<Model.ApplicabilityItem>>()
.subscribe((data: Model.Result<Model.ApplicabilityItem>) =>{
this.dataSource = data.itens;
});
this._applicabilityService
.getAllDelivery<Model.Result<Model.TypeDeliveryItem>>()
.subscribe((data: Model.Result<Model.TypeDeliveryItem>) => {
this.dataSourceDelivery = data.itens;
});
this._applicabilityService
.getAllPayment<Model.Result<Model.TypePaymentItem>>()
.subscribe((data: Model.Result<Model.TypePaymentItem>) => {
this.dataSourcePayment = data.itens;
});
}
initEditAplicabilidade(aplicabilidade: any){
aplicabilidade.edit = true;
this.createForm = this.builder.group({
id: aplicabilidade.id,
name: aplicabilidade.name,
context: aplicabilidade.context,
typeDeliveryDetailsModels: aplicabilidade.typeDeliveryDetailsModels,
typePaymentDetailsModel: aplicabilidade.typePaymentDetailsModel,
marketPlace: aplicabilidade.marketPlace
});
}
checkEdit() {
if (this.dataSource == null || this.dataSource.length == 0) return false;
return this.dataSource.filter((item: any) => item.edit === true).length == 0;
}
onUpdate(){
let formValue = this.createForm.value;
this._applicabilityService.update<Model.Result<Model.ApplicabilityItem>>(formValue)
.subscribe(success =>{
this.onGet();
},
error =>{
}
);
}
}
What I am, when I click edit (Pencil on Form), it opens the editing screen (That's doing it), but if I have TypePayment , the mat -select should be selected. By my code, it should work, but it does not work. I do not get any error, but Dropdown does not come with the selected item (s).
My Model
export interface ApplicabilityItem{
id: string,
name: string,
context: string,
typePaymentDetailsModel: TypePaymentItem,
typeDeliveryDetailsModels: TypeDeliveryItem,
marketPlace: boolean
}
export interface TypePaymentItem{
id: string,
sgpTypePaymentId: number,
name: string
}
export interface TypeDeliveryItem{
id: string,
sgpTypeDeliveryId: number,
name: string
}
By POstman , this is an example of Applicability with complex types:
{
"id": "3bd8862d-1b15-42fe-9734-426364823ecb",
"name": "Teste",
"context": "Texto",
"typePaymentDetailsModels": [
{
"id": "00dfea8b-4265-42d2-842a-2b854bfcc4dc",
"sgpTypePaymentId": 2,
"name": "Crédito"
},
{
"id": "37f0bda4-8661-4339-9c33-3fcbbb2bcd84",
"sgpTypePaymentId": 3,
"name": "Teste"
},
{
"id": "200c2e50-468d-46b0-8325-2cb76502c4df",
"sgpTypePaymentId": 78,
"name": "Novo Teste"
}
],
"typeDeliveryDetailsModels": [
{
"id": "75c7fdbb-82b7-4e2f-ac03-3696883820f4",
"sgpTypeDeliveryId": 1,
"name": "Bahia"
}
],
"marketPlace": true
}
EDIT1
As my colleague Eduardo Vargas directed me, I tried to do as he told me. I did so: Component
compareValues(c1: Model.ApplicabilityItem, c2: Model.ApplicabilityItem): boolean{
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
Html
<mat-form-field>
<mat-select multiple [compareWith]="compareValues" formControlName="typePaymentDetailsModel"
placeholder="Tipo de Pagamento" name="payment" >
<mat-option *ngFor="let payment of dataSourcePayment" [value]="payment">
{{payment.name}}
</mat-option>
</mat-select>
</mat-form-field>
and continue to dropdown on edit without the selected items.