gpt4 book ai didi

angular2 rc.5 自定义输入,没有未指定名称的表单控件的值访问器

转载 作者:太空狗 更新时间:2023-10-29 16:45:36 30 4
gpt4 key购买 nike

我有这样简单的自定义输入组件,

import {Component, Provider, forwardRef} from "@angular/core";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

const noop = () => {};

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
};

@Component({
selector: 'custom-input',
template: `

<input class="form-control"
[(ngModel)]="value" name="somename"
(blur)="onTouched()">

`,
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor{

//The internal data model
private _value: any = '';

//Placeholders for the callbacks
private _onTouchedCallback: () => void = noop;

private _onChangeCallback: (_:any) => void = noop;

//get accessor
get value(): any { return this._value; };

//set accessor including call the onchange callback
set value(v: any) {
if (v !== this._value) {
this._value = v;
this._onChangeCallback(v);
}
}

//Set touched on blur
onTouched(){
this._onTouchedCallback();
}

//From ControlValueAccessor interface
writeValue(value: any) {
this._value = value;
}

//From ControlValueAccessor interface
registerOnChange(fn: any) {
this._onChangeCallback = fn;
}

//From ControlValueAccessor interface
registerOnTouched(fn: any) {
this._onTouchedCallback = fn;
}

}

我有这样的应用程序模块,

/**
* Created by amare on 8/15/16.
*/
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AppComponent } from './app/app.component';
import {CustomInputComponent} from "./app/shared/custom.input.component";
import {RouterModule} from "@angular/router";
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule, FormsModule, RouterModule ],
declarations: [ AppComponent, CustomInputComponent],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

和主要

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

并且我已经在我的组件之一中使用了我的自定义输入,如下所示,但是我得到“没有具有未指定名称属性的表单控件的值访问器”。

<custom-input name="firstName" [(ngModel)]="firstName"></custom-input>

app.component 看起来像这样

import { Component } from '@angular/core';

@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';

firstName: string;
}

最佳答案

将 ngDefaultControl 添加到主机中的自定义输入组件解决了这个问题,感谢@danieleds

关于angular2 rc.5 自定义输入,没有未指定名称的表单控件的值访问器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38958347/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com