【发布时间】: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