Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to remove a selected option from an angular form with in a formBuilder.Group()?

I have a form set up and need to remove a selected option from the drop down before anything is sent to save so that the user cannot select that option again. I have referenced another thread on Stack however I am using another layer it seems so I cannot get the suggested fix to work.

I have the formArrayName then a formGroupName and then a formControlName.
The formGroupName is building this whenever the user clicks the add preference CTA on the UI

newPreference() {
     this.builderPreferences.push(this.formBuilder.group({
       groupId: [],
       manufacturerId: [], 
       manufacturerDivisionId:[],
       style: [''],
      color: [''],
  }));
 }

What I want to do is when that groupId is the same as the options group.id remove it from the list.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

[hidden]="builderPreferences.at(groupId).value==group.id?true:null"

This line should ideally work but its giving me the error message:

‘Property "groupId" does not exist on builderDetailComponent. Did you mean ‘group’?

Is the ‘group’ suggesting the formBuilder.group? How can I access the properties in that group then?

<ul formArrayName="builderPreferences">
    <li *ngFor="let builderPreference of builderPreferences.controls ; let idx = index">  
      <div [formGroupName]="idx">
      <label>Group</label>
      <select formControlName="groupId" id="groupList" class="form-control mb-3" ">
        <option value="0" selected>-- Select Inventory Group here --</option>
          <option *ngFor="let group of groupList; index as i" value="{{ group.id }}"         [hidden]="builderPreferences.at(groupId).value==group.id?true:null">
            {{ group.name }}
          </option>
      </select>
      </div>
   </li>
</ul>

>Solution :

Shouldn’t it be

Before:

[hidden]="builderPreferences.at(groupId).value==group.id?true:null"

After:

[hidden]="builderPreference.get('groupId').value == group.id ? true : null"
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading