如何让mat-select验证工作？
要让mat-select验证工作，可以按照以下步骤进行：
- 首先，在HTML模板中使用mat-select组件创建下拉列表，并设置必要的属性，如FormControl、ngModel等。例如：
<mat-form-field>
<mat-select placeholder="选择项" [formControl]="myControl" [(ngModel)]="selectedOption">
<mat-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mat-option>
</mat-select>
</mat-form-field>- 在组件的Typescript文件中，创建一个FormControl对象，并将其与mat-select组件关联起来。例如：
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
myControl = new FormControl('', Validators.required);
options = [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
];
selectedOption: string;
}在上述代码中，我们创建了一个FormControl对象myControl，并将其与mat-select组件的formControl属性关联起来。同时，我们还定义了一个选项数组options和一个变量selectedOption来存储用户选择的值。
- 在HTML模板中，可以使用
myControl对象的valid属性来判断mat-select是否通过验证。例如，可以在提交表单时检查验证状态，并根据需要显示错误信息。例如：
<mat-form-field>
<mat-select placeholder="选择项" [formControl]="myControl" [(ngModel)]="selectedOption">
<mat-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mat-option>
</mat-select>
<mat-error *ngIf="myControl.invalid && myControl.touched">请选择一个选项</mat-error>
</mat-form-field>
<button mat-raised-button color="primary" (click)="submitForm()">提交</button>在上述代码中，我们使用myControl.invalid和myControl.touched来判断mat-select是否通过验证，并在需要时显示错误信息。
- 最后，在组件的Typescript文件中，可以添加一个方法来处理表单的提交操作。例如：
submitForm() {
if (this.myControl.valid) {
// 执行提交操作
} else {
// 表单验证未通过，执行相应的操作
}
}在上述代码中，我们使用myControl.valid来判断mat-select是否通过验证，并根据需要执行相应的操作。
这样，就可以让mat-select验证工作了。请注意，以上代码是基于Angular框架和Angular Material库的示例，如果使用其他框架或库，可能会有所不同。
相关·内容
我有一个表示地址的表单，我使用mat-select表示州/省。不幸的是，它不会自动填充州/省(我假设是因为它不是本机select)。这是我的标记：
<mat-form-field>
<mat-select placeholder="State"
[(ngModel)]="state"
autocomplete="billing address-level1">
<mat-option *ngFor="let s of states" [val
浏览 1提问于2017-12-09得票数 9
1回答
我有以下几点。在页面加载中，我加载了可用日期的默认周。我想让mat-select显示当前加载的日期，它是空白的，直到用户选择不同的日期。如果我设置为option.selectedID，但我想在handleselect($event)中发送对象，则可以很好地工作。如何在页面加载时显示初始值。
<mat-select
(selectionChange)="handleSelect($event)"
>
<mat-option
*ngFor="let option
浏览 1提问于2020-07-23得票数 0
1回答
我有一个自定义的模式呈现表单，我正在尝试编辑它。
select组件如下所示：
<mat-select [formControl]="control" appColor="accent" ngClass="focus-{{propertyName}}" [multiple]="multiple">
<mat-option *ngFor="let option of options" [value]="option.enum[0]">
{{option.descrip
浏览 7提问于2022-11-30得票数 0
1回答
我希望在表单上实现全局验证，并根据此验证更改某些输入的颜色。
我有三个字段。
下面是我实现的内容：
function typeValidator(form: FormGroup) {
const type = form.controls['field1'].value;
if (type === 'test') {
const field2 = form.controls['field2'].value;
const field3 = form.controls['field3'].value;
r
浏览 0提问于2018-07-19得票数 0
3回答
我有一个简单的表格，它的逻辑是：
复选框1(是/否)
选择框2(如果是)选择框3(显示如果是)
只应将显示的选择框设置为required，另一个则不需要。
<mat-select placeholder='Show First Options' formControlName='b' [(ngModel)]="view">
<mat-option [value]="'first'">
First
</mat-option>
<mat-o
浏览 2提问于2017-11-03得票数 1
回答已采纳
<mat-form-field class="">
<mat-select placeholder="Lead Status" formControlName="leadStatusId" name="leadStatusId" id="leadStatusId" [formGroup]="form"
required *appReadOnlyView>
<mat-option *ngFor="let leadStatus of allLea
浏览 1提问于2019-02-26得票数 0
回答已采纳
2回答
选择选择方法。但它并没有选择默认选项。当使用在线编辑器尝试相同的代码时，它工作得很好。不知道为什么它和我的不一样。
HTML
<mat-form-field class="example-full-width">
<mat-select placeholder="Please Select" name="status" [(ngModel)]="myData.selectionData">
<mat-option value="selection1">se
浏览 3提问于2019-04-20得票数 0
我正在使用mat-select来显示下拉列表，我需要在角度下拉列表中选择所有功能。
下面是我的html
<mat-select formControlName="myControl" multiple (ngModelChange)="resetSelect($event, 'myControl')">
<mat-option>Select All</mat-option>
<mat-option [value]="1">Option 1</mat-option
浏览 1提问于2018-08-29得票数 7
回答已采纳
由于某些原因，使用Angular 8时，这个参数never对我的mat-select不起作用。
<mat-form-field appearance="outline" floatLabel="never">
<mat-label>Lesson</mat-label>
<mat-select [(value)]="selected" (selectionChange)="onMenuChange($event.value)">
<mat-option valu
浏览 0提问于2019-08-23得票数 3
即使其中一个字段不是必需的，并且当您不输入它时，表单仍然无效。我试过了，但不起作用。
app.component.html
<form [formGroup]="multiSelectForm">
<div formGroupName="A">
<mat-form-field appearance="outline" >
<mat-label>a1</mat-label>
<mat-select fo
浏览 5提问于2022-04-12得票数 0
2回答
我有两个选择：
<mat-form-field appearance="outline">
<mat-label>Access Type</mat-label>
<mat-select formControlName="accessType">
<mat-option>--</mat-option>
<mat-option value="paid-out"> Paid out</mat-option>
浏览 1提问于2020-07-26得票数 0
1回答
除了其他输入字段之外，我还有一个反应性表单，它还包括一个<mat-select>，并且我成功地为其他输入字段创建了FormControls，除了这个输入字段。我正在尝试检索服务中已经提供的一些值(在服务中，我创建了一个示例约会数组)，并将它们链接到表单的相应字段--它们都工作得很好，但是对于<mat-select>，我没有这样做，因为可以在下面的图像中观察到：
另外，为了澄清，speciality、appointmentDate、doctorName和notes都属于appointment-model。
任何建议都会有很大的帮助，因为我是这个领域的初学者，谢谢！
浏览 4提问于2022-11-14得票数 0
回答已采纳
2回答
在我的角v6应用程序中，我试图显示一个下拉列表，并根据布尔值将其设置为required，其中它设置在复选框的值上。下面是模板中该代码的一个片段(includeModelVersion最初设置为false)：
<mat-checkbox class='matCheckbox' (change)="includeModelVersion = !includeModelVersion">Run Model</mat-checkbox>
<mat-form-fi
浏览 0提问于2018-09-06得票数 2
回答已采纳
我有一个mat select，我想根据条件更改所选值的颜色。基本上是为了向用户显示已进行了更改。我知道我可以从样式中访问mat-select-value，但不确定如何使用ng-class对其实现条件： <mat-form-field>
<mat-select name="list"
[style.color]="myCondtition ? 'none': 'green'"
(selectionChange)="change()">
浏览 12提问于2020-09-04得票数 2
回答已采纳
我试图默认选择一个在mat-select中包含"null“值的选项。问题是，当html被显示时，它没有选择具有"null“值的选项。我正在使用Angular 7反应式和Angular Material 7。这是我有的-
Html：
<mat-select placeholder="User" formControlName="userId">
<mat-option [value]="null">None</mat-option>
<mat-option *ngFor="
浏览 3提问于2019-02-20得票数 14
回答已采纳
我有一个数组：let options = ["NAMNE", "AGE"]。
它在循环中呈现：
<ng-container *ngFor="let option in options">
<mat-select></mat-select>
</ng-container>
结果我得到了两个mat-selects
Mat-select Mat-select
Name Age
如果用户选择“名称”Age，如何切换它们
Mat-select Mat-select
Age
浏览 6提问于2022-06-14得票数 0
回答已采纳
如何修复它，使其工作，想要使用角材料下拉查看在每一个选择一个“公司名称”从sql server我想绑定下拉选择，它将让我选择我已经导入的公司名称。
TS-
HTML-
组件：
import { Component, OnInit } from '@angular/core';
import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';
import { User } from 'src/app/services/user.model
浏览 1提问于2019-09-05得票数 0
回答已采纳
4回答
我有Mat-select下拉菜单，如下所示
<mat-form-field>
<mat-label>Gender</mat-label>
<mat-select id="gender" required formControlName="gender">
<mat-option id="Male" value="male"> Male </mat-option>
<mat-option value=&
浏览 0提问于2019-06-10得票数 16
出于性能原因，我试图将cdkVirtualScroll与mat-select结合使用。
<mat-select formControlName="name">
<cdk-virtual-scroll-viewport itemSize="42" [style.height.px]="5*42">
<mat-option *ckdVirtualFor="let option of ($options | async)>{{option.value}}</mat-option&
浏览 13提问于2022-10-05得票数 3
2回答
我想通过扩展角材料组件mat-select来创建自己的选择组件，并使用我的自定义app-select组件，如下所示
<app-select>
<mat-option>Value1</mat-option>
<mat-option>Value2</mat-option>
<mat-option>Value3</mat-option>
<mat-option>Value4</mat-option>
</app-select>
我在stackblitz中做了一个例子
浏览 0提问于2019-06-19得票数 4
假设我在页面上有两个表单，并实现了一个类似stepper的向导，并将我的每个表单都放在了stepper的每个步骤上。现在我想让第二个表单上的字段为必填项，如果选择了第一个表单中的某些值。
参见下面的代码，第二种形式的rechargeCode与第一种形式选择的运算符相关。如果选择了某个特定运算符，则rechargeCode应为必填项。
<mat-vertical-stepper class="mat-elevation-z4" [linear]="true">
<mat-step [stepControl]="verticalSteppe
浏览 5提问于2019-10-20得票数 2
回答已采纳
2回答
我正在处理一个实现分页、过滤、选择等的mat-table。我在其中一个标题列上有这个mat-select，用于为同一列上的所有其他mat-select设置一个全局值.像这样
到目前为止，一切都很好，但是假设我选择了一个全局值，然后我增加了表的pageSize，已经有选择的行将保持不变，但是新的额外行将具有默认值；现在，如果我再次转到全局mat-select并单击相同的选项将值应用到新的行，那么什么都不会发生，因为我并没有实际更改所选内容；因此，我试图再次启动mat-select的SelectionChange事件，尽管这个值实际上是相同的。
任何帮助都是非常感谢的，我认为一定有一个非
浏览 1提问于2018-11-13得票数 6
回答已采纳
1回答
我正在做一个mat，选择可重用的组件，但是如果有错误，我不能添加Scss类，并且当没有错误时，类被删除。
如果输入有错误，我尝试添加一个类，但是即使在不再有error Edit: from代码注释时，输入仍然是红色的。
html
<mat-form-field appearance="legacy" [class.inputColorError]="controler.markAsDirty()"> <!-- here I try to add a class if the input is in error but the input rem
浏览 2提问于2022-11-03得票数 -1
回答已采纳
<mat-select required formControlName="country" [(ngModel)]="defaultCountry" placeholder="Country">
<mat-option *ngFor="let key of Object.keys(countryList)" [value]="[key]">{{[key]}}</mat-option>
</mat-select> 我有上面的代码。国家/地区在材料选择中显示良好
浏览 23提问于2019-05-02得票数 0
回答已采纳
6回答
我有以下代码
<form #createForm="ngForm">
<mat-form-field>
<mat-select placeholder="Favorite food"
matInput
[ngModel]
food="food"
#food="ngModel" required>
<mat-option *ngFor="let food of foods" [value]="food.valu
浏览 4提问于2018-03-29得票数 17
我有一个简单的类。
export class TestModel {
id: number;
month: string;
year: string;
get monthYear(): string {
return this.month + '-' + this.year;
}
}
这是一个典型的服务调用，用来获取一个值列表。
getVehicleMonths(): Observable<TestModel[]> {
return this.http.get<TestModel[]>('api/mo
浏览 2提问于2019-06-11得票数 0
我想做一个通用的可重用的mat-select组件，这样我就可以在我的Angular应用程序中使用它来访问多个组件。到目前为止，我已经让它工作了，但我现在面临的唯一挑战是如何让"onSelectionChange($event)“在不同的实现上运行。 reusable-select-component.html <mat-form-field>
<mat-select>
<mat-option *ngFor="let option of options" [value]="option.value">
浏览 14提问于2020-12-07得票数 0
回答已采纳
1回答
我正在开发一个类似google的应用程序，我们有一个包含问题的表单，我们从api中获取这些问题并动态地呈现表单。问题是，当我想要添加验证与角反应形式，垫-选择停止工作，每次我选择一个值，选择是明确的。
我已经尝试在没有运气的情况下调整这个。
模板
<mat-horizontal-stepper [linear]="true" #stepper style="background: transparent">
<mat-step *ngFor="let materia of materias;let m = index;" [
浏览 0提问于2019-05-07得票数 0
回答已采纳
我有一个关于ngx-translate的问题。我不知道如何让一个动态资源翻译成html。例如：
i18n
"agreement.status.0": "New",
"agreement.status.1": "Rejected",
html
<span>
<mat-form-field appearance="outline">
<mat-label>{{'choiceType' | translate
浏览 1提问于2020-11-27得票数 2
我使用的是angular 7和material，其中我使用了一个select元素来实现下拉功能，比如-
<mat-select placeholder="Select">
<mat-option *ngFor="let listData of List; let m = index" (onSelectionChange)="onChanged($event,listData )" **[value]='listData ?.id'** >
{{ listData.name }}
<
浏览 0提问于2020-02-22得票数 1
当我使用angular material mat-select时，我想调用一个函数来控制台记录所选项目的名称。但是为什么控制台会记录当前和之前的日志呢？以下是我的代码：
<mat-form-field appearance="fill" style="margin-top: 1rem; width: 100px;">
<mat-label>Groups</mat-label>
<mat-select>
<mat-option *ngFor="let
浏览 0提问于2020-09-05得票数 0
1回答
在我的一个组件中，我订阅了一个可观察到的。我订阅的基础JSON对象有很多层次的嵌套。
如何使几个下拉选择依赖于前面的选择？我使用模板变量来标记选择。
this._exposureService.listAllExposures .subscribe( res => { this.allExposureData = res；})；
res具有以下结构(用于说明目的)
res: [
{
companyId: 1,
reportDates: [
{
reportDate: 12/31/2017,
curre
浏览 2提问于2018-01-16得票数 0
回答已采纳
我的代码是：
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">
{{topping}}
</mat-option>
</mat-s
浏览 0提问于2021-02-08得票数 0
我们必须在mat-expansion-panel中显示一个表单。表单中有多个字段，对于其中几个字段，我使用mat-select，对于另外几个字段，我使用mat-input。
在扩展面板中，matInput工作正常，但mat-select没有显示用于选择可能值的选项。
尽管mat-select在正常显示时工作正常。
<mat-expansion-panel>
<mat-expansion-panel-header>
Heading 1
</mat-expansion-panel-header>
浏览 8提问于2018-01-25得票数 6
1回答
角度材料选择框未正确显示
、、、
我用Angular材料做了一个Angular 8项目，我有一个表单，我需要在其中添加一个具有以下样式的选择框： ? 注意标签“选择一个选项”样式如何在行的中间。 html代码： <mat-form-field>
<mat-label> Select an option</mat-label>
<mat-select>
<mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
浏览 33提问于2020-10-17得票数 0
1回答
我使用的是角材料步进器，它在一个组件中作为一个整体代码工作得很好。但步进器将用于10种不同的部件。有7种不同类型的表单，如输入、选择、名称、表等。因此，我计算出，我将步骤划分为单独的组件，其中每个组件都是一个步骤。所以，我决定为表单app-step-form制作一个模板
<form [formGroup]="myForm">
<mat-vertical-stepper [linear]="isLinear" #stepper>
<ng-content></ng-content>
</mat
浏览 8提问于2020-12-16得票数 0
原版：
在使用mat-select元素的情况下，我很难让我的matTooptip指令正常工作。问题是，不管发生什么，即使省略号存在，也始终是禁用的。这个指令，顺便说一句，效果很好。
我的指令如下
import { Directive, ElementRef, HostListener, OnInit } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';
@Directive({
selector: '[tooltipIfEllipsis]
浏览 5提问于2022-09-14得票数 -1
回答已采纳
我工作的角度7和我的要求之一，我有创建一个垫-选择与垫图标。我面临的问题是，我要么可以让图标显示，要么可以让选项标签显示，但不能两者都显示。我需要做的是能够连锁的价值，但我得到了一个错误的时候，我尝试。
垫子的选择被设置为-
<button mat-raised-button type="button" name="button" color="primary" class="roundedButton">
<mat-select [(value)]="selected2">
浏览 13提问于2019-10-02得票数 1
回答已采纳
在本例中：https://stackblitz.com/edit/angular-ivy-byvfjy?file=src/app/ofertas/filtro-ofertas/filtro-ofertas.component.ts 我有一个多选表单控件 <form [formGroup]="form">
<mat-form-field appearance="outline">
<mat-select formControlName="años" multiple placeholder="Años&
浏览 10提问于2021-11-16得票数 0
回答已采纳
TL；博士:我已经有了可行的解决方案，但是我想要解释一下为什么mat的行为是这样的。
在用角度材料构建应用程序时，我在模板中使用mat-select和*ngFor组合时遇到了这个错误：get priorities函数被连续调用，就像无限循环中的get priorities函数，浏览器冻结了。
组件
get priorities() {
return [
{ name: 'NORMAL', value: 100 },
{ name: 'HIGH', value: 200 },
{ name: 'FOR
浏览 8提问于2021-10-20得票数 1
我正在尝试为material.io表单设置一个默认值，但我似乎无法让它与组版本一起工作。以下是我的代码
<mat-form-field>
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.d
浏览 1提问于2018-02-14得票数 1
我有一个表单，用户可以在其中单击按钮并向FormArray添加新的FormGroup。
打字稿：
public addOutput() {
const outputs = this.userForm.controls.controllerOutputArray as FormArray;
var formGroup = this.fb.group({
controllerOutputID: new FormControl('', Validators.required),
})
outputs.push(formGroup);
浏览 7提问于2019-11-13得票数 0
1回答
我有下面的标记，它有一个间隔列，所以我可以左对齐，然后右对齐。它在笔记本电脑屏幕上看起来很棒。然而，在较大的显示器上，隔板不会伸展以使用所有可用空间。输入框和按钮在笔记本电脑屏幕上对齐得很好，但显示器上有很大的空间。
如何将按钮和输入框保持在一起，并让间隔使用所有可用的空间？
<div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="15">
<mat-form-field>
<mat-se
浏览 11提问于2020-05-26得票数 1
在mat-checkbox标签中使用mat-select是很棘手的:如果我单击mat-select，复选框也会被切换。我不想让这种事发生。 我试着去掉复选框中的选择，但是很难在一行上很好地显示这两个选项。我还将mat-select替换为select。这是可行的，但还不够完美。(例如，如果我想做多个选择)。 下面是一个有效的示例：https://angular-7em9xn.stackblitz.io 代码：https://stackblitz.com/edit/angular-7em9xn
浏览 17提问于2019-03-23得票数 0
1回答
在.html文件中，我有选择器：
<mat-form-field>
<mat-select #selector(selectionChange)="onSelectionChange($event.value)">
<mat-option *ngFor="let test of tests" [value]="test">
</mat-option>
</mat-select>
</mat-form-field>
在.ts文件中，我
浏览 2提问于2021-01-22得票数 1
回答已采纳
2回答
我有一个现有的数据库，我可以使用item.schoolName从下拉菜单中提取并填充下拉菜单。当我访问这个“候选人表格”时，它是特定于考生去的事件和学校。知道了这一点，我应该能够预先填充下拉列表与学校的名称，这是为了表格，而不是让候选人选择。我希望学校的名称预先填充，就好像它已经被选择在任何点击之前，我希望下拉列表仍然可用，以防它需要改变。
您将在我所包含的代码中看到，我尝试过{{getSchoolById(mylocalEvent.schoolId)}}，它实际上可以工作，并返回事件对应的学校的名称。然而，当这是粘贴到<mat-select [(value)] = 'myloc
浏览 0提问于2019-08-26得票数 0
回答已采纳
我有一个mat-select和一个mat-option列表，但是我在每个mat-option中有3个信息。示例：
<mat-select [(value)]="accountSelected">
<mat-option [value]="account" *ngFor="let account of listOfAccounts">
Account {{account.accountNumber}} Agency {{account.agencyNumber}} Digit {{account.d
浏览 5提问于2022-06-14得票数 0
回答已采纳
我有一个自定义的select组件，希望使用ng-content将我的选项传递给它，如下所示：
<lib-select [(selected)]="selected" (selectedChange)="onChange($event)">
<mat-option [value]="0">Value 1</mat-option>
<mat-option [value]="1">Value 2</mat-option>
浏览 13提问于2019-10-21得票数 3
正如标题所说，我有一个反应式表单，其中包含多个<mat-select>。在初始表单加载时，即使form.value显示初始选项，它也不会显示。
相关component.ts：
export class DesJobInfoEditComponent implements OnInit {
...
currentJobData: IJob;
jobTypes: IJobType[];
...
constructor(private fb: FormBuilder) {
...
// Construct forms
this.crea
浏览 2提问于2018-05-04得票数 12
1回答
我试图为角多个选择做所有的选择，它对一个选择有效，但是当你有超过一个选择时，我如何使它工作呢？当我为第二个输入添加select all时，它会选择第一个输入上的所有
campaign.ts
@ViewChild('mySel') skillSel: MatSelect;
toggleAllSelection() {
this.allSelected = !this.allSelected;
if (this.allSelected) {
this.skillSel.options.forEach( (item : MatOption) =
浏览 1提问于2021-02-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
