【问题标题】:Angular 5 -Material FormControl: Cannot find control with unspecified name attributeAngular 5 -Material FormControl:找不到具有未指定名称属性的控件
【发布时间】:2018-12-05 07:45:17
【问题描述】:

我正在开发一个网络应用程序。使用 Angular v5 和 Angular Material,我按照official docs. 的步骤创建了一个自动完成字段

但是,我得到了一个错误:

DialogTransferencia.html:5 ERROR Error: Cannot find control with unspecified name attribute
        at _throwError (forms.js:2432)
        at setUpControl (forms.js:2300)
        at FormControlDirective.ngOnChanges (forms.js:6459)
        at checkAndUpdateDirectiveInline (core.js:12365)
        at checkAndUpdateNodeInline (core.js:13893)
        at checkAndUpdateNode (core.js:13836)
        at debugCheckAndUpdateNode (core.js:14729)
        at debugCheckDirectivesFn (core.js:14670)
        at Object.eval [as updateDirectives] (DialogTransferencia.html:5)
        at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655)

这是我的代码:

<mat-horizontal-stepper #stepper="matHorizontalStepper">
<mat-step>
  <form class="example-form">
    <mat-form-field class="example-full-width">
      <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="userController" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let option of filteredOwners | async" [value]="option">
            {{ option }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </mat-step>

我在这里绑定了FormControl

import {Component,Input, Output, ViewChild, Inject} from '@angular/core';
import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms';
import {MatStepperModule} from '@angular/material/stepper';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {SelectorUsuarios} from './selector_usuarios.component';
import {PropietariosAPIService} from '../services/propietariosAPI.service';
import {Picker}  from './picker.component';
import { MAT_CHECKBOX_CLICK_ACTION } from '@angular/material/checkbox';
import {MatSnackBarModule, MatSnackBar} from '@angular/material/snack-bar';
import { ChangeOwnerAPIService } from '../services/changeOwner.service';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
declare var jquery:any;
declare var $ :any;

/**
 * @title Stepper overview
 */
@Component({
  selector: 'pasos-transferencia',
  templateUrl: '../views/pasos_transferencia.component.html',
  styleUrls: [],
  providers: [ChangeOwnerAPIService,MatSnackBarModule],
})
export class PasosTransferencia {
  @Input()
  public token;
  isLinear = false;
  public usuario;
  public usuarionuevo;
  usuarios = [];
  usuariosnuevos = [];
  @Input() 
  copia: boolean;
  @Input() 
  transferir: boolean;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  selectorUsuarios: SelectorUsuarios;
  arrayFiles;
  arrayFilesNames;
  @ViewChild('picker') child;

  public userController : FormControl; //Controlador del formulario de seleccion de propietarios
  filteredOwners: Observable<string[]>;

  constructor(private _formBuilder: FormBuilder,private propietariosAPI: PropietariosAPIService, private ownershipAPI: ChangeOwnerAPIService, private snackBar: MatSnackBar) {
    this.userController = new FormControl();
   }

   options = [
     'One','Two','Three'
   ];

  ngOnInit() {
    this.copia = false;
    this.transferir = false;
    this.arrayFiles =[];

    this.filteredOwners = this.userController.valueChanges
          .pipe(
            startWith(''),
            map(val => this.filter(val))
          );
    }

    filter(val: string): string [] {
      return this.options.filter(option => option.toLowerCase().indexOf(val.toLocaleLowerCase()) === 0);
    }

我想搜索mat-stepper 组件。 谢谢!

【问题讨论】:

  • 你的formContol需要属于一个formGroup,比如firstFormGroup
  • 您好,感谢您的回答,我将 formControl 添加到 formGroup 但仍然无法正常工作。错误是一样的。这就是代码 public userController = new FormControl(); //Controlador del formulario de seleccion de propietarios filteredOwners: Observable;构造函数(私有_formBuilder:FormBuilder,私有propietariosAPI:PropietariosAPIService,私有API:ChangeOwnerAPIService,私有snackBar:MatSnackBar){this.firstFormGroup = new FormGroup({userController:新FormControl()}); }
  • @Raael 您需要在 html 中添加一个 FormGroup。检查这个例子malcoded.com/posts/angular-fundamentals-reactive-forms
  • 就个人而言,我建议您应该使用英语作为变量,以提高可读性,以便其他人了解您在做什么。另请注意,MatSnackBarModule 不是提供者,最好将其导入您的应用模块。将组件 HTML 文件与实际组件分开放置是一个坏主意。考虑将 HTML 和组件放在同一位置。说得够多了。

标签: angular typescript angular-material angular5


【解决方案1】:

抱歉,我使用的是 MaterialDialog,上面的代码是 MaterialDialog 的子代。可能是 Angular 编译器找不到 formControl,因为它必须定义在 MaterialDialog 类中。

【讨论】:

    猜你喜欢
    • 2020-04-05
    • 2019-07-04
    • 1970-01-01
    • 2018-05-28
    • 2020-09-01
    • 2017-09-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多