Angular Material Form控件示例不运行
Angular Material是一个UI组件库，提供了一套现成的UI组件，包括表单控件。Angular Material Form控件示例不运行可能是由于以下几个原因：
- 缺少依赖：Angular Material需要依赖Angular框架和Angular Material库。确保已正确安装和配置了这些依赖。
- 错误的引入方式：在使用Angular Material时，需要在项目中正确引入相关的模块和组件。请检查是否正确引入了Angular Material Form控件所需的模块。
- 版本不兼容：Angular Material的不同版本可能存在一些差异和兼容性问题。请确保所使用的Angular Material版本与示例代码兼容。
- 代码错误：检查示例代码中是否存在语法错误、逻辑错误或拼写错误。特别注意表单控件的命名和属性设置是否正确。
针对Angular Material Form控件示例不运行的问题，可以尝试以下解决方案：
- 确保已正确安装和配置了Angular框架和Angular Material库。可以参考腾讯云的Angular开发文档：Angular开发文档。
- 检查示例代码中是否正确引入了Angular Material Form控件所需的模块。可以参考腾讯云的Angular Material文档：Angular Material文档。
- 确认所使用的Angular Material版本与示例代码兼容。可以参考腾讯云的Angular Material版本说明：Angular Material版本说明。
- 仔细检查示例代码，确保没有语法错误、逻辑错误或拼写错误。可以参考腾讯云的Angular开发文档和Angular Material文档，查找正确的示例代码和用法。
如果以上解决方案无法解决问题，建议提供更具体的错误信息或示例代码，以便更好地帮助您解决问题。
相关·内容
我正在认真学习angular2-dart，从它的测试版开始。我有一个包含以下代码的表单：
html
<div class = "container">
<div [hidden] = "isSubmitted">
<h1>Hero Form</h1>
<div class="md-button"><ng-content></ng-content></div>
<form (ngSubmit) = "onSubm
浏览 3提问于2016-01-02得票数 2
我是Angular Material**. 的新手我正在使用** Angular Material (8)**.编写一份登记表当这样做时，我看到当页面被重新加载时(通过点击浏览器上的"Refresh“按钮)显示错误消息。字段从未以任何方式、形状或形式被触及。**
为什么是这样的？
TIA
文件: register.component.html
[ ... snip ...]
<div class="flex-register-form">
<!-- Form -->
&l
浏览 3提问于2020-02-14得票数 0
回答已采纳
1回答
我已经实现了我的自动完成，没有错误，一切看起来都很好，但是绝对没有发生任何事情。我在输入字段中输入了一些内容，但似乎没有发生任何操作，控制台中也没有显示任何内容。
HTML
<form>
<mat-form-field>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
</mat-form-field>
<mat-autocomplete #
浏览 6提问于2018-01-19得票数 12
回答已采纳
我有一个角度应用程序，我使用的是角材料。
当然，我在谷歌上搜索了很多关于这个错误信息的信息。但没有找到合适的答案来解决我的具体问题。
所以我有一个from和一些下拉列表和一些单选按钮。每个单选按钮选项都有一些特定的输入字段。例如，注册单选按钮有下拉列表和数据报警器。但是，例如，无线电选项Inlog只有一个数据报警器。这是我表格的一部分：
<form class="from-horizontal" #form="ngForm" [formGroup]="filterSection" (ngSubmit)="closeSearch(fo
浏览 1提问于2019-10-30得票数 1
回答已采纳
显然，我正在导入ReactiveFormsModule，但仍然会出现错误。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.com
浏览 0提问于2018-07-06得票数 1
回答已采纳
角版5.2.4，Material2 5.2.4
我正在使用这些元素的组合：
垫-成型场
使用matinput指令输入
垫-数据报警器
垫子-数据采集器-开关
...in是在数据源更改时重新构建的表单。
我可以设置输入和垫-数据报警器切换到禁用，或启用，在最初的形式构建。重新生成窗体时，输入的禁用属性是可设置的。但是，对于任何在初始窗体生成之后重新构建的窗体，切换的禁用属性仍然处于初始状态(无论是启用的还是禁用的)。
状态(我在这里的元素周围使用引号)：
与任何标准的“输入元素”一样，可以通过添加禁用的属性来禁用datepicker输入。默认情况下，"mat-d
浏览 5提问于2018-08-08得票数 2
回答已采纳
1回答
我有一个问题，任何下拉菜单，以选择选项动态创建的角度材料。例如菜单中的子菜单，或者mat-paginator中的选择。 ? 如你所见，数字出现在另一边。在我这几天尝试的菜单中做了同样的事情，在错误的位置创建子菜单，当您单击菜单的另一个选项时，Angular继续创建更多的子菜单，而不删除其他子菜单。 我是Angular的新手，不知道发生了什么。 代码中没有错误。并且在导航器中很好地创建了材料Api表或菜单(并且可以与它们交互)。 也许是一些CSS？ 版本： Angular CLI: 9.1.13
Node: 10.20.1
OS: win32 x64
Angular: 9.1.13
浏览 17提问于2021-01-27得票数 0
2回答
我使用的是带有@angular/material版本2.0.0-beta.10的角4反应形式。我需要以编程的方式使md-error消息出现。
在必需的字段中，当用户不输入任何文本就离开输入时，我有一个md-error，上面写着“这个字段是必需的”。见代码：
<md-form-field>
<input mdInput type="text"
formControlName="PartNumber"
placeholder="Part Number"
max
浏览 3提问于2017-09-21得票数 2
回答已采纳
按照这个示例，我试图更改mat-form-field占位符的行为。有三种选择：auto、always和never。
这个特性确实是一个很好的特性，可以根据开发人员想要实现的占位符类型来使用。
实际上，它可以全局使用，直接将其传递给应用程序根目录的@NgModule：
@NgModule({
providers: [
{provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
]
})
并按以下方式构建视图：
<mat-form-field [floatLabel]="never&
浏览 0提问于2018-04-11得票数 5
回答已采纳
我有一个stepper表单，在第一步中，用户需要使用Angular Material design Datepicker组件选择日期。
当用户进入下一步时，我希望绑定他们选择的值，并将其再次显示在输入字段的顶部(他们也应该能够在此处更改它)。
我尝试过[(ngModel)]，但不确定我是否正确使用它。
<mat-form-field>
<input [(ngModel)]="date" formControlName="dateFormCtrl" matInput
[matDatepicker]="picker"
浏览 1提问于2018-04-20得票数 2
1回答
我想自定义css的md-form字段为例。我知道我可以导入一个本地的材料主题，但是我在调色板中没有白色
我想换一下
$primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-light-blue, 600, 100, 800);
到白色#FFF
@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-lig
浏览 4提问于2017-09-11得票数 1
回答已采纳
1回答
我试着用棱角的材料，然后跟着
在回顾后，建议以角材料作为核心模块。
因此，了解以下规则：
避免在任何地方导入CoreModule，除非在AppModule中。
一个延迟加载的特性模块直接导入CoreModule将产生它自己的服务副本，并且可能会产生不良的结果。
我编写了以下代码：
材料模块：
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations
浏览 2提问于2019-02-17得票数 0
当编译我的应用程序和运行时，HTML页面显示为空白，不会显示应用程序。我能够使用Google上的检查工具，Chrome说record.factory不是一个函数，页面运行良好。然而，我最近确实更新了我的角度版本的最新版本-所以我不确定这是否与它有关。
下面是我的module.ts代码，我怀疑这是导入的问题，通常情况下，当我遇到应用程序不显示的问题时，情况就是这样：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
浏览 0提问于2020-03-27得票数 6
回答已采纳
4回答
我试图设计一个带有棱角材料的表单，但是当我加载所有的输入样式时，似乎都不起作用。
这是我的HTML代码
<!-- Title Tool Bar with Shadow Lv6 -->
<mat-toolbar class="app-header mat-elevation-z6" color="primary">
<!-- Tool Bar Row 1 -->
<mat-toolbar-row>
<!-- Side Bar Button Opener -->
浏览 1提问于2018-05-14得票数 0
回答已采纳
我使用的是Angular CLI，Angular Material form和input。我开发了一个表单来在里面添加一个新的标签。
我被困在如何显示已经添加到输入中的每个hashtag。
下面是我的代码：
form.component.html
<form [formGroup]="createItemForm">
<fieldset>
<div class="row">
<div class="col-lg-6">
浏览 13提问于2019-11-26得票数 1
回答已采纳
我正在寻找一些帮助试图澄清，这一切都是常见的错误。我在我的应用程序的两个不同部分中使用表单，该表单在一个部分完美地工作，而另一个部分不工作。我进口了ReactiveFormsModule和FormsModule。
resolution.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ResolutionRoutingModule } from './resolution-routing
浏览 2提问于2021-01-21得票数 0
回答已采纳
1回答
我正在尝试向页面添加一个角度材质日期选择器。我一直在这样跟踪official doc's example，但我的页面上什么也没有显示。 在app.component.html中有： <section>
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" />
<mat-datepicker
浏览 20提问于2020-07-07得票数 0
1回答
我使用：tns create my-project-name --template nativescript-angular-drawer-template创建了一个基本的Nativescript应用程序
现在，我想将Material Design添加到我的应用程序中。根据，我运行命令npm install --save @angular/material并按照文档添加MaterialModule。但是我的应用程序出错了
错误查找模块函数
知道吗？
浏览 1提问于2017-01-31得票数 5
回答已采纳
我想在角10中使用新的日期选择器。
我成功地将角升级到了角10，然后从第一个示例复制了html代码。
它应该是这样的，日历弹出的位置很好：
(单击指向示例的链接时，可能必须向上滚动以找到第一个示例。如果单击右边的<>，可以看到示例后面的代码。)
我将示例中的html代码复制到我的组件中，现在看起来如下(在Chrome &Firefox中试用过)：
黑条是我页面的侧边栏，所以这与数据选择无关。当然，弹出式应该放在更右边和更低的位置。而且，它看起来与示例非常不同。
在这个例子中，他们不使用任何额外的CSS，为什么我的弹出看起来如此不同？为什么它总是放得这么差
浏览 3提问于2020-06-27得票数 2
回答已采纳
由于您可以看到发送优惠按钮是禁用的，我只希望在两个输入框都被填充后启用该按钮。
在这里，我与你分享我的代码库。
请检查代码并在stackblitz上修改它。
1.示例-dialog.Component.html
<form id="bidForm" #bidForm="ngForm">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputQuantity
浏览 3提问于2020-11-23得票数 0
所以我做了很多研究，但我就是搞不懂。
我想使用角材质窗体控件来制作文本框组件。
在这个之后，我实现了如下
textbox.component.html
<mat-form-field>
<input matInput type="text" [placeholder]="placeholder" [(ngModel)]="value" />
<mat-error>This field is required</mat-error>
</mat-form-field>
te
浏览 0提问于2019-04-20得票数 6
回答已采纳
2回答
我有一个材质的角度步进(这里是一个)，我想在每一步加载时重新设置表单。我在中发现，我们可以在MatStep上使用reset()方法
将步骤重置到其初始状态。请注意，这包括重置表单数据。
但是，每次我调用此方法时，它都会生成一个错误：Error: list is undefined
在这里，一个
app.component.html，
<h1>{{ name }}</h1>
<hr />
<mat-stepper
#stepper
class="flex-grow-1"
(selectionChange)="r
浏览 15提问于2022-10-19得票数 0
回答已采纳
1回答
我希望在从Angular material的步进器中使用mat-select显示默认值。 编辑不能将formControlName与双向绑定一起使用。在声明表单组时，我最终初始化了组件中的值 <mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup"&
浏览 15提问于2020-04-14得票数 0
回答已采纳
3回答
角质输入不起作用
、、、、
我正在使用的角材料参考和的例子。
我的代码与示例中所示的相同。但是，这对我没有用。我正在使用asp.net代码2.0中的角5模板。
在我的index.cshtml页面中，我添加了
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
以下是输入字段不起作用的html代码
dashboard.component.html
<div class="example-container">
<m
浏览 0提问于2018-02-10得票数 0
我使用的是Angular Material component https://material.angular.io/components/input/overview，但材质动画不起作用 包依赖 "dependencies": {
"@angular/animations": "~9.1.1",
"@angular/cdk": "^9.2.1",
"@angular/common": "~9.1.1",
"@angular/compiler": "~9.
浏览 21提问于2020-04-24得票数 1
2回答
我刚开始使用角形，我被告知要使用反应形式，我正在遵循角度材料教程，但是当我尝试使用具有表单控制的输入时，它说这不是输入的一部分，我相信我已经有了所有的导入，这是我的代码错误。
Can't bind to 'formControl' since it isn't a known property of 'input'.
Html：
<label for="naame">Name: </label>
<input id="name" type="text" [formCon
浏览 21提问于2022-11-24得票数 -1
回答已采纳
1回答
我偶然发现了这篇文章，当select在输入之后时，它工作得很好，但是如何在matinput之前使用mat-select呢？一旦我切换了顺序，组件就变得不可用，每次单击字段内都会触发select。 Angular Material Input and select in one form field 我的分叉：https://stackblitz.com/edit/angular-6nqzf1-ox413y?file=app%2Fform-field-overview-example.html <mat-form-field appearance="outline"
浏览 12提问于2020-08-18得票数 1
回答已采纳
3回答
我正在尝试使用实现一个MaterialDialog，出于某种原因，我得到了：
Cannot read property 'data' of null at new ACDialogComponent
我的组件
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
import { Component, OnInit, Inject } from "@angular/core";
import { FormGroup, FormBuilder } from "@
浏览 0提问于2018-11-07得票数 0
2回答
我正在尝试使用angular-6的angular-material
我的material.module.ts是这样的
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/ic
浏览 0提问于2018-05-29得票数 2
1回答
我得到了一个选择框的角度片段，它可以工作。我如何把这个变成一个复选框？
<mat-form-field class="example-medium-width">
<mat-select matInput name="learnerType" [(ngModel)]="learningPlan.learnerTypes" placeholder="Learner Type" multiple #field_learnerType="ngModel">
<mat-opt
浏览 4提问于2017-10-21得票数 0
如何使用此箭头按钮在角度日期选择器中递增和递减日期。我真的是一个新手，我需要你的帮助来实现这个功能。提前谢谢。 app.component.ts <button mat-button class="material-icons">keyboard_arrow_left</button>
<button mat-button class="material-icons">keyboard_arrow_right</button>
<mat-form-field appearance="fill&
浏览 24提问于2020-10-08得票数 1
回答已采纳
1回答
如何导入.ts文件中的模块？
、、、、
我有一个文件material.ts，如下所示：
export { MatFormFieldModule } from '@angular/material/form-field';
export { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
export {MatInputModule} from '@angular/material/input'
export {MatSlideToggleModule} from
浏览 2提问于2022-03-08得票数 0
我在angular2应用程序中加载模板时遇到了问题。
system.config.js：
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '/libs/'
},
// map tells the System loader where to look for things
map: {
// our app is
浏览 1提问于2017-02-27得票数 0
回答已采纳
我尝试在输入中添加一个值，因为当它打开时，我需要将信息收费到表单中，在测试了不同的方法后，我发现使该值不显示在angular上的属性是FormControlName，而且它是angular中的表单，我不能剪切FormControlName，那么我如何修复它？
<input
type="text"
class="form-control form-control-sm"
id="Name"
name="Name"
value=
浏览 8提问于2021-03-06得票数 0
回答已采纳
我有一个uiModule。它进出口各种“角/材料”模块。
我曾希望当我将uiModule导入到anotherModule；现在anotherModule将能够访问@角/材料的东西.但这并不能奏效。
虽然材料在uiModule - anotherModule内部很好地识别物质元素，但是也有很多错误，如
NullInjectorError:没有提供InjectionToken垫-菜单-滚动策略！NullInjectorError:没有覆盖的提供者！
在尝试使用<mat-menu>之后，我得到了这些示例
这里是关于uiModule的文章
// material
import { Ma
浏览 18提问于2021-12-09得票数 2
1回答
我有日期选择器，它应该动态禁用和启用的复选框切换点击。所有来自库angular material 6的组件。由于我对表单处理程序使用的是反应式方法，所以我不能简单地使用[disable]指令。我得到了更多的错误：
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute wi
浏览 1提问于2018-11-27得票数 4
回答已采纳
我就是想不出我忘了联系什么。但最终我有了一个不可能使用的datepicker
"@angular/material"："^9.2.3“
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepi
浏览 14提问于2020-05-14得票数 0
回答已采纳
5回答
我的应用运行得很好，直到我卸载了bootstrap并安装了angular material，instead....Then尝试做ng服务，但得到了这个错误。
Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected.
14导出声明类型AbstractConstructor<T = object> =抽象新(...args: any[])表达式T；~ Expression - => TS1109:期
浏览 0提问于2021-05-26得票数 7
我正在尝试让这个例子在我的第一个angular应用程序中工作:带有clear按钮的输入字段。
我的template.html中有以下代码：
<mat-form-field>
<input matInput type="text" placeholder="Wens" [(ngModel)]="value">
<button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear&#
浏览 2提问于2018-11-26得票数 3
1回答
网格系统不像文档那样显示颜色
、、、、
我刚开始使用。我在我的示例中尝试了元素，我正在测试flex属性。在这个例子中，这显示了每个flex元素的三种不同的颜色，但是在中，我没有得到这些颜色。
这是我的代码：
HTML：
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css
浏览 4提问于2015-10-21得票数 0
回答已采纳
我想使用Angular 6 Material UI componenet来提供更高级的外观和感觉，我正在运行下面的测试程序，但matInput没有提供这种外观和感觉。参考：代码：
<form class="example-form">
<md-form-field class="example-full-width">
<input mdInput placeholder="Favorite food" value="Sushi">
</md-form-field>
浏览 0提问于2018-09-09得票数 2
我正在构建一个简单的角度应用程序，使用角度材料设计前端。这个应用程序只有两个组件在同一个页面中呈现。当我为应用程序提供服务时，它将返回到控制台中：
NullInjectorError："StaticInjectorError(AppModule)RouterScroller -> ViewportScroller: StaticInjectorError(平台:核心)RouterScroller -> ViewportScroller: NullInjectorError：！“
AppModule.ts
import { BrowserModule }
浏览 2提问于2019-07-03得票数 22
回答已采纳
我正在尝试为一个也使用Angular材质和Angular Flex布局的Angular样本应用程序创建测试。 在我的应用程序中，我已经使用了一个共享模块来导入所有的角度材质组件。它是这样的： import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIc
浏览 4提问于2019-04-14得票数 0
回答已采纳
我是Angular 2的新手，我正在尝试将angular材料实现到我的表单中。我之前在SO上读过关于这个主题的问题，没有一个解决方案对我有帮助。这不是我app.module.ts中的NoopAnimationsModule的问题。而且(我认为)在角度材料的版本中这不是问题。我还在styles.scss中添加了主题。如果您能快速看一眼，我将不胜感激。谢谢! package.json {
"name": "client",
"version": "0.0.0",
"scripts": {
"
浏览 7提问于2019-12-17得票数 1
试着用
<mat-form-field></mat-form-field>
在我的申请中。但不幸的是，错误越来越少
VM347:27 Unhandled Promise rejection: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: MatFormField,MatFor
浏览 1提问于2017-10-19得票数 1
我正在使用带类型脚本的Angular。
我在类型脚本中有模型类
module app.form {
export class Patient{
constructor(
public firstName: string,
public lastName: string,
public gender: string,
public birthDate: Date,
public currentMedications: string,
浏览 0提问于2016-03-14得票数 4
2回答
MatDialog空显示
、、、、
我正在使用this教程来显示简单的对话框。 问题是对话框显示为空，而控制台没有显示任何错误。 即使我尝试更改dialog.component.html或dress-form.ts中的部件，也没有任何变化。 这是我打开对话框的组件(dress-form.ts)： import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from 'src/app/dialog/dialog.component';
@Component({
selector: '
浏览 19提问于2020-07-19得票数 0
我使用的是Angular 9中的Angular材质，它对我不起作用。它正在编译和运行，但每次我在HTML中使用角度材料时，比如mat-checkbox或mat-form-field，它就不能正常工作。我甚至尝试直接从material.angular.io复制代码，但仍然不起作用。 ? 我圈出了我想要做的那个。我的结果是这样的： ? 代码是相同的，除了我使用了不同的占位符和标签，并且我没有使用mat-hint功能。我已经将模块正确地导入到了我的app.module.ts中，所以我不知道哪里出了问题。以下是我使用的代码。 <div class="false"
浏览 35提问于2020-06-30得票数 1
回答已采纳
我的部分原理图需要安装Angular Material。但是，Angular材质通常通过以下命令安装：
ng add @angular/material
如何使我的原理图运行命令ng add @angular/material？我希望它运行该命令，并且安装Angular材质的常规过程将会发生(要求主题、排版等)。
唯一的资源是。
接下来，我的脚本如下所示，但它似乎根本没有运行该命令：
function ngAddAngularMaterial() {
return (host: Tree, context: SchematicContext) => {
const
浏览 18提问于2020-11-16得票数 0
我正在尝试从Angular 8.2更新到Angular 9。我是通过遵循官方更新指南来做到这一点的。我在两个项目的上层存储库中运行命令。 对于一个项目，一切正常，Angular更新到了版本9.1，但对于另一个项目，我得到了这个模式的几个bug： ? 这个项目根本不起作用，在Chrome中无法访问，但有趣的是，错误发生在另一个项目的文件中。因此，“仪表板”项目运行良好，但我在此截图中实际服务的项目却不是。 以下是我的Angular包版本： ? 下面是我如何在App Module中导入Material Modules的示例： import {MatProgressSpinnerMod
浏览 13提问于2020-03-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
