当前位置: 首页 > 知识库问答 >
问题:

在angular代码中使用formControl[重复]

佴波鸿
2023-03-14
"dependencies": {
  "@angular/cdk": "5.0.4",
  "@angular/common": "~5.2.0",
  "@angular/compiler": "~5.2.0",
  "@angular/core": "~5.2.0",
  "@angular/flex-layout": "2.0.0-beta.12",
  "@angular/forms": "~5.2.0",
  "@angular/material": "5.0.4"
}
-src
  -app
    -myComponent
      -myComponent.component.html
      -myComponent.component.ts
      -myCompnent.module.ts
    -shared
      -material
         -material.module.ts
      -shared.module.ts
import { FormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material';


@NgModule({
 providers: [],
 imports: [
    FormsModule
 ],
 exports: [
   MatSelectModule
 ]
})
 export class CustomMaterialModule {
}
import { CustomMaterialModule } from './material/material.module';

@NgModule({
  exports: [
    CustomMaterialModule
  ],
  declarations: []
})

export class SharedModule {
}
import { SharedModule } from "../shared/shared.module";

@NgModule({
  imports: [
    SharedModule,
  ],
  declarations: [myComponent],
  exports: [myComponent]
 })
export class myComponentModule { }
 export class myComponent {
 toppings = new FormControl();

 toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];


<mat-form-field>
   <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
     <mat-select-trigger>
          {{toppings.value ? toppings.value[0] : ''}}
          <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
            (+{{toppings.value.length - 1}} others)
          </span>
      </mat-select-trigger>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
      </mat-select>
 </mat-form-field>

我在执行时出现了这个错误:

Can't bind to 'formControl' since it isn't a known property of 'mat-select'.
1. If 'mat-select' is an Angular component and it has 'formControl' input, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

我错过了什么?

共有1个答案

欧阳博文
2023-03-14
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...
    ReactiveFormsModule,
  ],
  // ...
})
export class AppModule {}
 类似资料:
  • 如何使用Typescript而不是HTML从NgIf的HTML DOM视图中移除元素?寻找相似的语法。 更喜欢在打字稿中遍历数组,并从视图中删除项目,而不是用NgIF包装所有20个表单控件,这似乎有点重复。 当前使用的是Formbuilder,而不是FormArray。这个链接将样式显示为“无”,从我的阅读来看,这不是Angular的理想实践。这是真的吗? 角度2 - 我们有排除数组,并且更喜欢在

  • 本文向大家介绍angular中使用Socket.io实例代码,包括了angular中使用Socket.io实例代码的使用技巧和注意事项,需要的朋友参考一下 服务端(nodeJs/express): 客户端,创建一个ChatService ChatComponent 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍在 Angular 中使用Chart.js 和 ng2-charts的示例代码,包括了在 Angular 中使用Chart.js 和 ng2-charts的示例代码的使用技巧和注意事项,需要的朋友参考一下 Chart.js是一个流行的JavaScript图表库,ng2图表是Angular 2+的包装器,可以轻松地将Chart.js集成到Angular中。 我们来看看基本用法。 安装

  • 在模板中使用自定义管道时,如下所示: 而且效果很好。 但它表明 用户名未定义

  • 了解如何使用 Dreamweaver的“代码片段”面板创建代码片段并在不同的 Dreamweaver 站点上重用代码。 如果您发现自己多次重复代码块,可以使用代码片段加快编写代码的过程。写入该代码一次,将其保存为一个代码片段,然后在“代码片段”面板中双击它,以将它插入到多个位置。 使用“代码片段”面板创建的代码片段不是针对特定站点的,因此可以跨站点重用它们。您还可以使用同步设置跨不同设备、Drea

  • 我试图用innerHTML绑定/呈现html内容,但无法呈现{{…}在角度上。 代码如下: 结果 这是测试代码,我正在尝试用angular..绑定/呈现{test}代码。。, 未绑定/呈现测试变量值。。。。