小编sli*_*tes的帖子

如何使用模型驱动/反应形式修改指令中的输入值

我想实现一个"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)

javascript angular2-forms angular2-directives angular

5
推荐指数
1
解决办法
1780
查看次数