Javascript 角度：mat form字段必须包含MatFormFieldControl

我正在尝试添加一个带有自定义电话号码输入控件的表单字段。我使用了来自的电话示例

代码如下：

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

电话
包括区号

从'@angular/cdk/a11y'导入{FocusMonitor}；
从“@angular/cdk/concurvation”导入{concurveboleanproperty}；
从“@angular/core”导入{Component，ElementRef，Input，OnDestroy}；
从'@angular/forms'导入{FormBuilder，FormGroup}；
从“@angular/material”导入{MatFormFieldControl}；
从'rxjs'导入{Subject}；
/**@title表单字段，带有自定义电话号码输入控件*/
@组成部分({
选择器：“表单字段自定义控件示例”，
templateUrl:“表单字段自定义控件示例.html”，
样式URL:['form-field-custom-control-example.css']，
})
导出类FormFieldCustomControlExample{}
/**用于保存电话号码的数据结构*/
出口级MyTel{
构造函数（公共区域：字符串，公共交换：字符串，公共订户：字符串）{}
}
/**用于电话号码输入的自定义“MatFormFieldControl”*/
@组成部分({
选择器：“示例电话输入”，
templateUrl:'example tel input example.html'，
样式URL:['example-tel-input-example.css']，
提供程序：[{提供：MatFormFieldControl，useExisting:MyTelInput}]，
主持人:{
“[class.example floating]”：“shouldLabelFloat”，
“[id]”：“id”，
“[attr.aria descripbedby]”：“descripbedby”，
}
})
导出类MyTelInput实现MatFormFieldControl、OnDestroy{
静态nextId=0；
部分：表格组；
stateChanges=新主题（）；
聚焦=假；
ngControl=null；
errorState=false；
controlType='示例电话输入'；
id=`example tel input-${MyTelInput.nextId++}`；
descripbedby=''；
变空{
const{value:{area，exchange，subscriber}}=this.parts；
返回！区域&&！交换&&！订户；
}
get shouldLabelFloat（）{返回this.focused | | |！this.empty；}
@输入（）
获取占位符（）：字符串{返回此。_占位符；}
设置占位符（值：字符串）{
这。_占位符=值；
this.stateChanges.next（）；
}
私有占位符：字符串；
@输入（）
get required（）：布尔值{返回此值。_required；}
需要设置（值：布尔值）{
此._required=强制执行对象属性（值）；
this.stateChanges.next（）；
}
private _required=false；
@输入（）
get disabled（）：布尔值{返回此值。_disabled；}
设置禁用（值：布尔值）{
此._disabled=强制BoleAnProperty（值）；
this.stateChanges.next（）；
}
private _disabled=false；
@输入（）
获取值（）：MyTel | null{
const{value:{area，exchange，subscriber}}=this.parts；
如果（area.length==3&&exchange.length==3&&subscriber.length==4）{
返回新的MyTel（区域、交换机、用户）；
}
返回null；
}
设置值（电话：MyTel |空）{
const{area，exchange，subscriber}=tel | | new MyTel（''，''）；
this.parts.setValue（{area，exchange，subscriber}）；
this.stateChanges.next（）；
}
构造函数（fb:FormBuilder、专用fm:FocusMonitor、专用elRef:ElementRef）{
this.parts=fb.group({
区域：“”，
交换：“”，
订阅服务器：“”，
});
fm.monitor（elRef，true）.subscribe（origin=>{
这个。聚焦=！！原点；
this.stateChanges.next（）；
});
}
恩贡德斯特罗（）{
this.stateChanges.complete（）；
this.fm.stopMonitoring（this.elRef）；
}
SetDescripteById（ID:string[]）{
this.descripeby=id.join（“”）；
}
onContainerClick（事件：MouseeEvent）{
if（（event.target作为元素）.tagName.toLowerCase（）！='input'）{
this.elRef.nativeElement.querySelector（'input'）！.focus（）；
}
}
}

example-tel-input-example.html

  <div [formGroup]="parts" class="example-tel-input-container">
      <input class="example-tel-input-element" formControlName="area" size="3">
      <span class="example-tel-input-spacer">&ndash;</span>
      <input class="example-tel-input-element" formControlName="exchange" size="3">
      <span class="example-tel-input-spacer">&ndash;</span>
      <input class="example-tel-input-element" formControlName="subscriber" size="4">
    </div>

&恩达什；
&恩达什；

但我得到了以下错误：

错误：mat form字段必须包含MatFormFieldControl

---

错误说明

mat表单字段

应至少包含一个表单字段，从中获取输入

例如：

matInput

mat select

等

在您的情况下，您可以在example-tel-input-example.html中的输入字段中添加

matInput

标记。您还可以将

mat form field

移动到

example tel input example

组件中，并将其添加到每个

matInput

字段中

<div [formGroup]="parts" class="example-tel-input-container">
      <mat-form-field>
         <input matInput class="example-tel-input-element" formControlName="area" size="3">
      </mat-form-field>
      <span class="example-tel-input-spacer">&ndash;</span>
      <mat-form-field>
          <input matInput class="example-tel-input-element" formControlName="exchange" size="3">
      </mat-form-field>
      <span class="example-tel-input-spacer">&ndash;</span>
      <mat-form-field>
          <input matInput class="example-tel-input-element" formControlName="subscriber" size="4">
      </mat-form-field>
</div>

&恩达什；
&恩达什；

---

注意：

mat图标

或

mat提示

不能被视为表单字段

确保导入了MatInputModule，并且

包含

指令的

---

导入

MatInputModule

，解决了我的错误

您需要将类指定为

MatFormFieldControl

---

另外，不要忘记在输入标记中写入name属性：

name="yourName"

---

需要导入两个模块，并将它们添加到导入和导出部分

从“@angular/material/form field”导入{MatFormFieldModule}；
从“@angular/material/input”导入{MatInputModule}；
@NGD模块({
导入：[MatFormFieldModule，MatInputModule]，
导出：[MatFormFieldModule，MatInputModule]
})

关闭输入标记的另一个可能问题。如果从一个角度示例（）中复制代码，可能会得到以下代码：

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

选择一个日期

输入应具有关闭标记（斜杠）：

如果您在代码中使用任何“input”标记以及“mat form field”，请确保在输入标记中包含“matInput”

如果“材料表单字段”的子标记中存在任何*ngIf，请在“材料表单字段”标记中指定*ngIf条件

---

请确保已导入MatInputModule@Kimwano你的解决方案为我解决了。谢谢哇太谢谢你了，抄了他们的

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<input matInput [matDatepicker]="picker" />