获取错误mat-form-field必须包含MatFormFieldControl

Question

我正在研究 Angular 形式，我正在尝试验证响应式形式。对于模板，我在我的项目中使用材料设计，

我在文本框中放置条件 ngIf 以进行验证时出错

错误是 -： 错误 错误： mat-form-field 必须包含 MatFormFieldControl。

请看 -：

要解决此问题，我已经有了 1. 在模块.ts文件中导入了MatInput模块 2.已添加 您必须将matInput添加到输入中

但仍然得到同样的错误

我把代码放在下面

模板-：

<form class="example-form" novalidate (ngSubmit)='user_signup(user)'  [formGroup]='user'>
          <div class="row align-items-center">
            <div class="col-md-1">
              <label><img src="assets/imgs/mobile-icon.svg"/></label>
            </div>
            <div class="col-md-11">
              <mat-form-field class="example-full-width" >
                <input matInput type='number' placeholder="Phone Number:"  maxlength="10" name="phone" formControlName="phone" *ngIf="( user.get('phone').hasError('required') || user.get('phone').hasError('minlength') || user.get('phone').hasError('maxlength'))&& user.get('phone').touched" required/>
              </mat-form-field>
              <div>
              <div class="error" *ngIf="user.get('phone').hasError('required') && user.get('phone').touched">
                Phone number Required
              </div>
              <div class="error" *ngIf="user.get('phone').hasError('minlength') && user.get('phone').touched">
                Min 10 digit
              </div>
              <div class="error" *ngIf="user.get('phone').hasError('maxlength') && user.get('phone').touched">
                Max 10 digit
              </div>
              </div>
            </div>
          </div>
</form>

组件.ts

 import { Component, OnInit } from '@angular/core';
    import { ServicesService } from '../service/services.service';
    import { FormGroup  , FormControl  , Validators } from '@angular/forms';
    @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.scss']
    })
    export class RegisterComponent implements OnInit {
     user: FormGroup;
 constructor( public restapi:ServicesService) {
        this.user = new FormGroup({
          password: new FormControl('', [Validators.required, Validators.minLength(6)]),
          email: new FormControl('', [Validators.required,Validators.email]),
          phone: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10)]),
          });
       }
  ngOnInit() {
  }
}

模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentsComponent } from './components/components.component';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule }    from '@angular/common/http';

import { MDBBootstrapModule, WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md';
import { MatTabsModule, MatDialogModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule} from '@angular/material';

/*angular material compoment*/
import { MatInputModule } from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import { RouterModule, Routes } from '@angular/router';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatTableModule} from '@angular/material/table';
import {MatSelectModule} from '@angular/material/select';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSliderModule} from '@angular/material/slider';
import {MatBadgeModule} from '@angular/material/badge';
/*component */
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { FleshScreenComponent } from './flesh-screen/flesh-screen.component';

/* Service */
import { ServicesService } from './service/services.service';
@NgModule({
  declarations: [
    AppComponent,
    ComponentsComponent,
    LoginComponent,
    RegisterComponent,
    FleshScreenComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MDBBootstrapModule.forRoot(),
    ReactiveFormsModule ,
    HttpClientModule ,
    MatFormFieldModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [ServicesService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我没有尝试过，但由于input元素上应用的*ngIf指令，您可能会收到此错误。

为什么？

特别是，在代码的这一部分中：

<mat-form-field>
    <input *ngIf="...">
</mat-form-field>

Angular 对此的解释如下：

<mat-form-field>
    <ng-template [ngIf]="...">
      <input>
    </ng-template>
</mat-form-field>

所以在引擎盖下，input元素不是mat-form-field的直接内容子元素。到目前为止没有问题。

但是，在深入研究其源代码后，MatFormField需要通过@ContentChild找到您的input（应用matInput指令）。这意味着您必须提供 input 元素作为 mat-form-field 的内容子元素。

简而言之，您需要以某种方式将input元素直接放置在mat-form-field元素下方。

溶液

不要将*ngIf应用于 input 元素，而是将其应用于 mat-form-field 。这样，input元素就是mat-form-field的内容子元素，因为它应该是。

<mat-form-field *ngIf="...">
    <input>
</mat-form-field>

Answer 2

当使用 mat-form-field 标记内部输入/选择标记时，该标记必须包含 matNativeControl 属性。

例如：

<mat-form-field>
    <input matInput matNativeControl placeholder="Input">
  </mat-form-field>

参考官方文件：链接

Answer 3

似乎有一个错别字错误，请将您的代码更改为此

 <mat-form-field class="example-full-width" >
              <input matInput type='number' placeholder="Phone Number:"  maxlength="10" name="phone" formControlName="phone" *ngIf="user.get('phone').hasError('required') || user.get('phone').hasError('minlength') || user.get('phone').hasError('maxlength') && user.get('phone').touched" required/>
            </mat-form-field>

Answer 4

MatFormControl 是指与该表单字段一起使用或应该使用的 formControl。使用指令可能会导致输入元素不呈现。从而在要求错误中重新出现。