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

Issue

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.

[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"

Answered By - Naren Murali