我想实现一个"TrimDirective",它使用Angular 2 RC 5和模型驱动/反应形式从输入字段中删除前导和尾随空格.
我设法更改输入字段的值,但是我没有在组件中获得新值myForm.valueChanges()
.
请参阅此plunker:http://plnkr.co/edit/ruzqCh?p = preview
当指令更改值时,如何触发formGroup的更新?
模板:
<form [formGroup]="myForm">
<input formControlName="name" trim>
</form>
latest value: -{{ latestValue }}-
Run Code Online (Sandbox Code Playgroud)
组件:
@Component({
selector: 'my-app',
templateUrl: 'app/app.html'
})
export class AppComponent implements OnInit {
private myForm: FormGroup;
private latestValue: string;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(),
});
this.myForm.valueChanges.subscribe(v => this.latestValue = v.name)
}
}
Run Code Online (Sandbox Code Playgroud)
指令:
@Directive({
selector: '[trim]'
})
export class TrimDirective {
private el: any;
constructor(
el: ElementRef
){ …
Run Code Online (Sandbox Code Playgroud)