angular mat-select formcontrol

Question

I have a form with a mat-select.The user is required to choose something from the list and is than able to click the button. I have a problem that the button doesn't get enabled when the user chose something. Do you guys know what i did wrong?

html code:

<div style="text-align:center">
  <table class="rwd-table">
      <tr>
          <th>Omschrijving</th>
          <th>Hoeveelheid</th>
          <th>articleIdCustomer</th>
      </tr>
      <tr class="info">
          <td data-th="Omschrijving">{{description}}</td>
          <td data-th="Hoeveelheid">{{quantity}}</td>
          <td data-th="articleId">{{articleIdCustomer}}</td>
      </tr>
  </table>
<div [formGroup]="incidentForm">
  <div *ngIf="show" class="row">
   <div class="col-xs-2 col-sm-2"></div>
  <div class="col-xs-8 col-sm-8">
      <mat-form-field  class="full-width">
          <mat-select (ngModelChange)="updateUI()" formControlName="sapCode" placeholder="Reden">
            <mat-option  *ngFor="let line of incidentTypes.incidents"  [value]="line.SapErrorCode">
              {{line.description}}
            </mat-option>
          </mat-select>
        </mat-form-field>
  </div>
  <div class="col-xs-2 col-sm-2"></div>
</div>

<div class="row">
  <div class="col-xs-2 col-sm-2"></div>
  <div class="col-xs-8 col-sm-8">
      <mat-form-field class="full-width">
        <textarea formControlName="comment" matInput placeholder="Commentaar:"></textarea>
      </mat-form-field>
  </div>
  <div class="col-xs-2 col-sm-2"></div>
</div>

<div *ngIf="showIsReturn" class="row">
  <div class="col-xs-2 col-sm-2"></div>
  <div class="col-xs-8 col-sm-8">
    Gelieve het fout bestelde artikel retour te sturen.
  </div>
  <div class="col-xs-2 col-sm-2"></div>

</div>

<div *ngIf="showQuantity"  class="row">
    <div class="col-xs-2 col-sm-4"></div>
    <div class="col-xs-8 col-sm-4">
      Aantal
        <div class="input-group input-group-sm quantity">
            <div class="input-group-prepend">
                <button (click)="lowerAmount()" class="btn btn-outline-secondary" type="button">-</button>
            </div>
            <input formControlName="amount" type="text" value="{{amount}}" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
            <div class="input-group-append">
                <button (click)="higherAmount()" class="btn btn-outline-secondary" type="button">+</button>
            </div>
        </div>
    </div>
    <div class="col-xs-2 col-sm-4"></div>
</div>

<div *ngIf="showBackOrder" class="row">
    <div class="col-xs-2 col-sm-2"></div>
    <div class="col-xs-8 col-sm-8">
      <p></p>
        <mat-checkbox formControlName="isBackOrder" class="check">Nalevering?</mat-checkbox>
        <p><mat-checkbox formControlName="return" class="check">Buiten leverdag?</mat-checkbox></p>
    </div>
    <div class="col-xs-2 col-sm-2"></div>

</div>
<p></p>
<button [disabled]="!incidentForm.isValid" class="btn" (click)="send()" mat-raised-button>Verzend</button>
<p></p>
<button class="btn" (click)="goBack()" mat-raised-button>Go Back</button>
</div>

Component code:

import { Component, OnInit, inject } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {IncidentService} from '../service/incident.service'
import {MatSnackBar} from '@angular/material'
import { FormGroup, FormBuilder, Validators} from '@angular/forms';
import { incidentLines } from '../model/incident/incidentLines';
import { IncidentTypes } from '../model/incident/incidentTypes';
import { ActivatedRoute, Router } from '@angular/router';
import { Incident } from '../model/incident/incident';


@Component({
  selector: 'app-incident',
  templateUrl: './incident.component.html',
  styleUrls: ['./incident.component.css']
})
export class IncidentComponent implements OnInit {
  title = 'Incident melding'
  amount = 1;
  incidentTypes:IncidentTypes;
  show:boolean = false;
  showQuantity:boolean = false;
  showBackOrder:boolean = false;
  showIsReturn:boolean  = false;
  incident:Incident;

  //params from incident service
  quantity:string;
  articleIdCustomer:string;
  description:string;
  barcode:string;
  incidentForm:FormGroup;

  constructor(private http:HttpClient,public snackBar: MatSnackBar,private formBuilder: FormBuilder, private route:ActivatedRoute,private router:Router, public incidentService:IncidentService) {
    this.incidentTypes = new IncidentTypes();
    this.getJson();
    this.makeForm();
   }

  ngOnInit() {
    this.getIncident();
  }

  lowerAmount(){
    this.amount = this.amount-1;
    if(this.amount < 0){
      this.amount = 0;
    }
  }

  higherAmount(){this.amount = this.amount+1;}

  getJson(){
    //this is a fake api call, can easily be changed. look at incidents.json file for what the code expects of the api call
    this.http.get<IncidentTypes>('src/assets/incidents.json').subscribe(data => {
      this.incidentTypes = data;
      this.show = true;
     }, err => {
       this.snackBar.open("Something went wrong!", "Ok", {
         duration: 5000,
       });
   });
  }

  makeForm(){
    this.incidentForm = this.formBuilder.group({
      sapCode:['',Validators.required],
      comment:[''],
      amount:[''],
      isBackOrder:[''],
      return:['']
    });
  }

  updateUI(){
    var code;
    code = this.incidentForm.controls.sapCode.value;
    console.log(code)
    let line = this.incidentTypes.incidents.find(l => l.SapErrorCode === code);
    this.quantitiyUI(line);
    this.returnUI(line);
    this.backorderUI(line)
    this.incidentForm.updateValueAndValidity();
  }

  quantitiyUI(line:incidentLines){
    if(line.canSetAmount == 1){this.showQuantity = true}else{this.showQuantity = false}
  }

  returnUI(line:incidentLines){if(line.isReturnFromDownloadable == 1){this.showIsReturn = true}else{this.showIsReturn = false}}

  backorderUI(line:incidentLines){if(line.isBackOrder == 1){this.showBackOrder = true}else{this.showBackOrder = false}}

  goBack(){
    this.router.navigate(['/data',{barcode:this.barcode}]);
  }

  getIncident(){
    this.incident = this.incidentService.getIncident();
    if(this.incident == null && localStorage.getItem("incident") != null){
      this.incident = JSON.parse(localStorage.getItem("incident"))
    }
    if(this.incident != null){
    this.quantity = this.incident.quantity;
    this.articleIdCustomer = this.incident.articleIdCustomer;
    this.description = this.incident.description
    this.barcode = this.incident.barcode;
    }else{
      this.snackBar.open("Geen product gekozen! Ga terug", "", {
        duration: 5000,
      });
    }
  }
  send(){
    console.log(JSON.stringify(this.incident))
  }
}

The method makeForm() is used to make the form. The method getJson() loads all the differnt mat-select options from a local json file.

Thanks for helping

Solution

I believe the FormGroup don't have isValid property. Your button has [disabled]="!incidentForm.isValid", I think it should be [disabled]="!incidentForm.valid" or [disabled]="incidentForm.invalid"

Comments

[SeleM]

Could you please provide a stackblitz ?

[Joren Vermeir]

Thanks, this was my problem!