如何解决如何在Angular中为反应形式建立可重用字段
我正在尝试为反应形式构建可重用的字段组件,但无法从custom-input
组件中获取值。
<form [formGroup]="form" (ngSubmit)="submit()">
<custom-input id="name" name="name" formControlName="name"></custom-input>
<button type="submit" name="button">Submit</button>
</form>
我的自定义输入可重用组件
import { Component,OnInit,Input } from '@angular/core';
import { FormControl } from "@angular/forms";
@Component({
selector: 'custom-input',template: '<input type="text" [class]="class" [id]="id" [name]="name" [formControlName]="formControlName">',styles: []
})
export class CustomInputComponent implements OnInit {
@Input() public id: string;
@Input() public class: string;
@Input() public name: string;
@Input() public formControlName: string;
constructor() { }
ngOnInit() {
}
}
解决方法
您可以实现ControlValueAccessor,但可能不想重新实现本机输入的方法。为此,您可以使用FormControlDirective来访问valueAccessor。
formControl和formControlName被添加为输入属性,因此在两种情况下都可以使用。如果提供了formControlName,将从ControlContainer中检索FormControl的实例。
@Component({
selector: 'app-custom-input',template: `<input type="text" [formControl]="control">`,styleUrls: ['./custom-input.component.scss'],providers: [
{
provide: NG_VALUE_ACCESSOR,useExisting: CustomInputComponent,multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
@Input() formControl: FormControl;
@Input() formControlName: string;
@ViewChild(FormControlDirective,{static: true})
formControlDirective: FormControlDirective;
private value: string;
private disabled: boolean;
constructor(private controlContainer: ControlContainer) {
}
get control() {
return this.formControl || this.controlContainer.control.get(this.formControlName);
}
registerOnTouched(fn: any): void {
this.formControlDirective.valueAccessor.registerOnTouched(fn);
}
registerOnChange(fn: any): void {
this.formControlDirective.valueAccessor.registerOnChange(fn);
}
writeValue(obj: any): void {
this.formControlDirective.valueAccessor.writeValue(obj);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。