ngModel有什么问题?我希望输入框作为角度2的组件

时间:2017-02-01 09:45:15

标签: angular angular2-forms

我希望输入框作为具有自定义验证的组件,可以将其注入此中。因此,一个输入组件可用于规则整个项目,并且验证非常通用,以至于它们位于一个地方,我们可以在任何地方重新使用该组件。

输入组件的代码如下: -

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'alt-text-field',
    template: `
    <input 
    #field="ngModel"
    class="form-control"
    [id]="id"
    [name]="name"
    [ngModel]="value"
    (ngModelChange)="onValueChange($event)"
    [placeholder]="placeholder"
    [type]="type"
    minlength="5" maxlength="8"
    required
    > {{field.className}}`
})
export class AltTextFieldComponent {
    /** ID for an element */
    @Input() id: string;

    /** Name of the Text Field Element */
    @Input() name;

    /** Placeholder for the Text Field */
    @Input() placeholder: string;

    /** Type for the Text Field */
    @Input() type: string;

    /** Value for the Text Field */
    @Input() value: String;

    /** Value change to register a change in the value of the component */
    @Output() valueChange = new EventEmitter<string>();

    /** Method to handle the change in the input field */
    onValueChange(event){
        this.valueChange.emit(event)
    }
}

在我添加#field="ngModel"之后,它才能正常工作,我无法使用输入。它不会打印类名。

另一方面,我还需要将表单作为组件。这样它可以在整个应用程序中使用。请帮助我,以了解我的方法是否正确或我是否做错了。如果可能的话,请指出这种代码。

0 个答案:

没有答案