我希望输入框作为具有自定义验证的组件,可以将其注入此中。因此,一个输入组件可用于规则整个项目,并且验证非常通用,以至于它们位于一个地方,我们可以在任何地方重新使用该组件。
输入组件的代码如下: -
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"
之后,它才能正常工作,我无法使用输入。它不会打印类名。
另一方面,我还需要将表单作为组件。这样它可以在整个应用程序中使用。请帮助我,以了解我的方法是否正确或我是否做错了。如果可能的话,请指出这种代码。