我们正在用Kendo Telerik和Angular创建一个InputText组件。输入文本框具有自己的UX样式/感觉。如何将Angular中的formControl名称包装到其中?尝试时,收到以下错误。
原始InputText.ts
@Component({
selector: 'app-input-text',
templateUrl: './input-text.component.html',
styleUrls: ['./input-text.component.scss']
})
export class InputTextComponent implements OnInit {
@Input() MaxLength: number;
@Input() FocusIn: boolean;
@Input() Width: string;
@Input() Value: string;
@Input() FormControlName:string;
@Output() saveValue = new EventEmitter();
Original InputText.html
<div class="input-wrap">
<div class=" cont" [style.width.px]="Width">
<input kendoTextBox #input
[maxLength]="MaxLength ? MaxLength : '200'"
[value]="Value ? Value : ''"
(focusin)="handleEvents($event,'focusin')"
(focusout)="handleEvents($event,'focusout')"
(keyup)="handleEvents($event,'keyup')"
(change)="saveValueAction($event)" />
<button (click)="clear($event)"></button>
<span class="validation"></span>
</div>
</div>
New InputText.html
现在尝试为Angular表单应用formControlName,它不起作用,
formControlName="FormControlName" // This line is inserted below
<div class="input-wrap">
<div class=" cont" [style.width.px]="Width">
<input kendoTextBox #input
[maxLength]="MaxLength ? MaxLength : '200'"
[value]="Value ? Value : ''"
formControlName="FormControlName" // Added Line here
(focusin)="handleEvents($event,'focusin')"
(focusout)="handleEvents($event,'focusout')"
(keyup)="handleEvents($event,'keyup')"
(change)="saveValueAction($event)" />
<button (click)="clear($event)"></button>
<span class="validation"></span>
</div>
</div>
我收到以下错误:将formControl名称包装到不知道formGroup的组件中的最佳方法是什么?
<app-inputtext [Width] = "300" formControlName = "city"></app-app-inputtext>
Uncaught Error: Template parse errors:
No provider for NgControl ("<div class="input-wrap">
<div class=" cont" [style.width.px]="Width">
[ERROR ->]<input kendoTextBox #input
如果我尝试做常规的内联html,它会起作用。
<input type="text" class="textbox" name="city" formControlName = "city">
Angular 2中有更新的方法吗? Angular 2 - formControlName inside component
您需要在输入中添加[(ngModel)] =“ value”