CODEWITHSUNDEEP
angularangular-materialmaterial-designangular9
Iori Yagami
Iori Yagami

Reputation: 406

Angular <mat-select> component is not working on a FormGroup

I'm trying to use inside a formGroup but although it builds the component and I can navigate through options, I couldn't select any of them. When the page is loaded I can see this error :

ERROR TypeError: "this._selectionModel.onChange is undefined"

Here's my component.ts : 

@Component({
  selector: 'app-agent',
  templateUrl: './agent.component.html',
  styleUrls: ['./agent.component.css']
})
export class AgentComponent implements OnInit {

  agents = [];
  durationInSeconds = 5;
  statusList = ['AVAILABLE', 'NOT_AVAILABLE'];
  agentForm = new FormGroup ({
    name: new FormControl(),
    status: new FormControl(this.statusList[0]),
  });
  searchForm = new FormGroup(
    {key: new FormControl()}
  );

  constructor(private agentService: AgentService) { }

  ngOnInit(): void {
    this.getAll();
  }

  filter(): void {
    if (this.searchForm.value.key) {
      this.getOne();
    } else {
      this.getAll();
    }
  }

  save(): void {
    this.agentService.save(new AgentData(this.agentForm.value.name, this.agentForm.value.status)).subscribe((data) => {
      this.agentForm.value.name = data.name;
      this.agentForm.value.status = data.status;
    }
    );
  }
}

And this is the component html part : 

        <form [formGroup]="agentForm" (submit)="save()">
          <table class="form-group" style="width: 100%; ">
            <div class="row" >
              <mat-form-field style="width: 100%; ">
                <mat-label>Agent name</mat-label>
                <input matInput placeholder="Ex. fferchichi" formControlName="name">
              </mat-form-field>
            </div>

            <div class="row">
              <mat-form-field style="width: 100%;">
                <mat-label>Status</mat-label>
                <mat-select formControlName="status">
                  <mat-option *ngFor="let status of statusList" [value]="status">
                    {{status | labelit}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="agentForm.hasError('required')">Please choose a Status</mat-error>
              </mat-form-field>
            </div>

            <div class="row" style="text-align: right;">
              <input type="submit" class="btn btn-default" value="Save"/>
            </div>

          </table>
        </form>

It feels like the binding with formControl is read-only but I can't find out why or how to fix it.

Upvotes: 0

Views: 1288

Answers (3)

Juany
Juany

Reputation: 133

I had the same issue and I fix it using native select and adding the matNativeControl.

<mat-form-field style="width: 100%;">
   <mat-label>Status</mat-label>
   <select matNativeControl formControlName="status">
      <option *ngFor="let status of statusList" [value]="status">
         {{status | labelit}}
      </option>
   </select>
   <mat-error *ngIf="agentForm.hasError('required')">Please choose a Status</mat-error>
</mat-form-field>

Upvotes: 0

XYZ_undefined
XYZ_undefined

Reputation: 64

you cannot simply assign values to formcontrol using '=' symbol, You have to options, i.e., eitheir you have to use setValue method or patchValue method, I'd suggest you to use patchValue method because, when you use setValue method you have to change every formcontrol in your form. so you try something like this...

this.searchForm.patchValue({
    name: data.name,
    status: data.status
});`

Upvotes: 0

Edward
Edward

Reputation: 1126

According to Angular.io documentation for FormControl the 'value' property is readonly.

you should use the formcontrol.setValue() method to change the value of a formcontrol

Upvotes: 1

Related Questions