Hello unity I need some help with Angular and Primeng ponents, 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.

Hello unity I need some help with Angular and Primeng ponents, 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.

• javascript
• angular
• typescript
• primeng

Share Improve this question Follow asked Nov 22, 2018 at 23:35 Mitch3091Mitch3091 4,68833 gold badges2121 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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