如何观察角度上的形状变化?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

在AngularJS中,我可能有一个类似于这样的表单:

<ng-form>
    <label>First Name</label>
    <input type="text" ng-model="model.first_name">

    <label>Last Name</label>
    <input type="text" ng-model="model.last_name">
</ng-form>

在相应的控制器中,我可以很容易地监视表单内容的更改,如下所示:

function($scope) {

    $scope.model = {};

    $scope.$watch('model', () => {
        // Model has updated
    }, true);

}
提问于
用户回答回答于

可以订阅整个表单更改FormGroup表示表单提供valueChanges属性,它是可观察实例:

this.form.valueChanges.subscribe(data => console.log('Form changes', data));

在这种情况下,需要使用FormBuilder就像这样:

export class App {
  constructor(private formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      firstName: 'Thomas',
      lastName: 'Mann'
    })

    this.form.valueChanges.subscribe(data => {
      console.log('Form changes', data)
      this.output = data
    })
  }
}

检查valueChanges在行动中演示

用户回答回答于

如果你用FormBuilder见@dfsqs的答案。

如果你不使用FormBuilder,有两种方法可以通知更改。

方法1

正如在关于这个问题的评论中所讨论的,使用在每个输入元素上。添加到模板中:

<input type="text" class="form-control" required [ngModel]="model.first_name"
         (ngModelChange)="doSomething($event)">

然后在组件中:

doSomething(newValue) {
  model.first_name = newValue;
  console.log(newValue)
}

页面中有一些与ngModel相关的附加信息:

ngModelChange不是<input>元素事件。它实际上是NgModel指令。当角看到形式中的绑定目标时[(x)],它期望x指令有一个x属性和xChange输出属性 另一个奇怪的是模板表达式,model.name = $event,我们已经习惯了$event对象来自DOM事件。ngModelChange属性不会生成DOM事件;它是一个角EventEmitter属性,该属性在输入框值触发时返回. 我们几乎总是喜欢[(ngModel)],如果我们必须在事件处理中做一些特殊的事情,例如取消或节流键笔画,我们可能会分割绑定。

在你的情况下,我想你想做些特别的事情。

方法2

定义本地模板变量并将其设置为ngForm

对输入元素使用ngControl。

使用@Viewchild获取对表单的NgForm指令的引用,然后订阅NgForm的ControlGroup进行更改:

<form #myForm="ngForm" (ngSubmit)="onSubmit()">
  ....
  <input type="text" ngControl="firstName" class="form-control" 
   required [(ngModel)]="model.first_name">
  ...
  <input type="text" ngControl="lastName" class="form-control" 
   required [(ngModel)]="model.last_name">

class MyForm {
  @ViewChild('myForm') form;
  ...
  ngAfterViewInit() {
    console.log(this.form)
    this.form.control.valueChanges
      .subscribe(values => this.doSomething(values));
  }
  doSomething(values) {
    console.log(values);
  }
}

扫码关注云+社区