我有一个带有mat-select的表单。用户需要从列表中选择某项，然后才能单击按钮。 我有一个问题，当用户选择某些东西时，按钮没有启用。 你们知道我做错了吗？
html代码：
<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>
组件代码：
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))
}
}
方法makeForm（）用于制作表单。 方法getJson（）从本地json文件加载所有不同的mat-select选项。
感谢您的帮助
答案 0 :(得分：0)
我相信FormGroup没有isValid属性。
您的按钮有[disabled]="!incidentForm.isValid"，我认为它应该是[disabled]="!incidentForm.valid"或[disabled]="incidentForm.invalid"