Btukfyl

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.

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

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.