Angular mat-button-toggle-group multiple=true and mat-button-toggle oddity

Question

I am having a really odd problem with the mat-button-toggle. I have the following code:

<mat-button-toggle-group formControlName="fcCWShowForms" multiple="true">
<mat-button-toggle value="HE" (change)="this.showHe=!this.showHe">
    Button 1
</mat-button-toggle>
<mat-button-toggle value="RAD" (change)="this.showRad=!this.showRad">
    Button 2
</mat-button-toggle>
<mat-button-toggle value="TS" (change)="this.showTS=!this.showTS">
    Button 3
</mat-button-toggle>                  
<mat-button-toggle value="WH" (change)="this.showWH=!this.showWH">
    Button 4
</mat-button-toggle>
<mat-button-toggle value="EE" (change)="this.showEE=!this.showEE">
    Button 5
</mat-button-toggle>

<mat-tab-group formControl="tabgroup">
    <mat-tab label="Section 1">
        <div *ngIf="this.showHe">stuff</div>
    </mat-tab>
    <mat-tab label="Section 2">
        <div *ngIf="this.showRad">stuff</div>
    </mat-tab>
    <mat-tab label="Section 3">
        <div *ngIf="this.showTS">stuff</div>
    </mat-tab>
    <mat-tab label="Section 4">
        <div *ngIf="this.showWH">stuff</div>
    </mat-tab>
    <mat-tab label="Section 5">
        <div *ngIf="this.showEE">stuff</div>
    </mat-tab>
</mat-tab-group>

What happens is: Clicking on any of the first 3 toggle buttons work 100% perfect, click the button and the proper tab shows the proper contents.

Clicking on the last 2 buttons is the odd stuff. It sets the boolean value properly (yes, they are all public booleans in the class), but the button doesn't display as clicked until you click on something else on the page. The div tags display as they should, but the buttons do not look like they do anything until AFTER you click on something else.

Everything is identical, except for the variable names and the values. It was working at one point, and I don't even think I changed anything.

I also get the error: No value accessor for form control with unspecified name attribute on the line that states:

<mat-button-toggle value="WH" (change)="this.showWH=!this.showWH">

But, if I remove it, the error goes to the line above it. If I add name="blah" it does nothing to fix it. If I add formControlName="name of control created in the class", it has no effect in any way.

What should I look at to be the problem? I have changed many things in this based on my google searches, and no solution brings me out of this problem. It is obvious that the problem is somewhere else in the code, but I cannot find it. Any thoughts on what to search for?

The component itself is pretty complicated and is a child component with other components, so the fully rendered page is quite intense.

Looking for any input.

Thanks in advance. If I find a fix, I will post it! Brad

I am not using the NgModel, I am using Reactive Forms.

Coder B Coder B · Accepted Answer · 2019-12-05T21:48:44

I found the problem. It was the HTML code inside the mat-tabs. There was a mix of (NgModel) and formControlName on different form controls inside those tabs. Basically, I had forgot that those tags existed. Once I had cleaned them up, the buttons were fixed.

I am still a bit new to Angular, and this is a massive page with lots of moving parts. It is always good to learn these things the hard way, because then you really learn them.

I hope this will help someone in the future.

Thanks, Brad

Angular mat-button-toggle-group multiple=true and mat-button-toggle oddity

1 Answers