Angular reset dropdown values primeng

1
votes

Hello comunity I need some help with Angular and Primeng components, the scenario is the next.

I have a model:

export class Properties {
    public IdFittingConnector: number;
    public IdProperty: number;
    public IdGroup: number;
    public OrderAparitionNumber: number;
    public OrderCodePos: number;
    public ConnectorDescription: string;
    public PropertyDescription;
    public Values: FittingPropertiesValues[];
    public Disabled: boolean;
    public SelectedData: FittingPropertiesValues;
}

This model is stored in an array so foreach item in the array I create an select/dropdown

<div *ngFor="let item of arrFittingsCombos;  let i = index">
    <h4>{{item.PropertyDescription}}</h4>
    <p-dropdown [(disabled)]="item.Disabled" [options]="item.Values" optionLabel="IrredutibleFractionValue" [(ngModel)]="item.SelectedData" [showClear]="true" (onChange)="OnFittingComboChange($event)" placeholder="Select Item" [style]="{'width':'100%'}"></p-dropdown>
</div>

Like you can see guys, in the model I have a prop that store the dropdown values called "Values" and on the same model I store the selected option on the prop called "SeloectedData".

Now the big deal is the next.

I have a couple of validations and the problem is that I have two dropdowns but if the second value is > the first drop value I need to reset the second dropdown. I show you the logic code... 

if (selectedOption.IdProperty == 5) {
    let diam: number = this.arrFittingsCombos.filter(x => x.IdProperty == 1)[0].SelectedData.NumberValue;

    if (selectedOption.NumberValue > diam) {
        alert("Seleccion invalida, la selección es mayor que el primer diametro");
        this.arrFittingsCombos.filter(x => x.IdProperty == 5)[0].SelectedData = null;
        this.searchBtnDisabled = true;
    }
}

Like you can see I'm resetting the [(ngModel)] and in effect it does but in the dropdown the showed label still exist. What I'm doing wrong? If the first time the validations are ok First DropDown Value < Second DropDown Value and after that I change the second dropdown value to > first DropDown value the behavior is the desired one but after that the showed label never reset anymore.

Thanks a lot for you time and I hope you can give me a bit of light.

2
javascriptangulartypescriptprimeng

2 Answers

1
votes

I have the solution in the HTML I've added the angular identifier:

#dropdown_i 

<div *ngFor="let item of arrFittingsCombos;  let i = index">
    <h4>{{item.PropertyDescription}}</h4>
    <p-dropdown #dropdown_i [(disabled)]="item.Disabled" [options]="item.Values" optionLabel="IrredutibleFractionValue" [(ngModel)]="item.SelectedData" [showClear]="true" (onChange)="OnFittingComboChange($event, drop_i)" placeholder="Select Item" [style]="{'width':'100%'}"></p-dropdown>
</div>

then in the typescript code I receive the dropdown in the parameter.

OnFittingComboChange(event, dropdown: Dropdown) {
  //TODO logic code here...
}

finally using a method of the dropdown called dropdown.clear() I can reset the picked option.

if (drop.value != null &&  selectedOption.IdProperty == 5) {
    let diam: number = this.arrFittingsCombos.filter(x => x.IdProperty == 1)[0].SelectedData.NumberValue;

    if (selectedOption.NumberValue > diam) {
        this.messageService.add({ severity: 'warn', summary: 'Validación', detail: 'Seleccion invalida, la selección es mayor que el primer diametro' });
        drop.clear(null);
        this.searchBtnDisabled = true;
    }
}

now when the condition is ok the element is cleared correctly and the behavior is the desired.

0
votes

why this doesn't work

This is because you are mutation the property SelectedData on a new array.

Calling .filter on an array always returns a filtered copy of the array. So when you mutate this, the ngModel isn't aware of it.

possible solution

I work mostly in react so I'm not sure if mutating a property on your class instance is "accepted" by angular. But lets assume it is...

What you can do is replacing the arrFittingsCombos with your mutated array, like so:

const newArray = this.arrFittingsCombos.filter(x => x.IdProperty == 5)

newArray[0].SelectedData = null

this.arrFittingsCombos = newArray