blocks|key|4442523|text|要完成前面的更多精彩答案，您需要注意表单利用可观察对象来检测和处理值更改。这是一件非常重要和强大的事情。Mark和dfsq在他们的答案中都描述了这一方面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442524|可观察性不仅允许使用subscribe方法(类似于Angular+1中promises的then方法)。如果需要为表单中更新的数据实现一些处理链，您可以更进一步。|offset|length|style|CODE|4442525|我的意思是，您可以在此级别使用debounceTime方法指定去抖动时间。这允许您在处理更改之前等待一段时间，并正确处理几个输入：|4442526|this.form.valueChanges
++++.debounceTime(500)
++++.subscribe(data+=>+console.log('form+changes',+data));|code-block|syntax|javascript|4442527|您还可以直接插入要在值更新时触发的处理(例如，一些异步处理)。例如，如果您希望处理一个文本值以根据AJAX请求过滤列表，则可以利用switchMap方法：|4442528|this.textValue.valueChanges
++++.debounceTime(500)
++++.switchMap(data+=>+this.httpService.getListValues(data))
++++.subscribe(data+=>+console.log('new+list+values',+data));|4442529|您甚至可以进一步将返回的observable直接链接到组件的属性：|4442530|this.list+=+this.textValue.valueChanges
++++.debounceTime(500)
++++.switchMap(data+=>+this.httpService.getListValues(data))
++++.subscribe(data+=>+console.log('new+list+values',+data));|4442531|并使用async管道显示它：|4442532|<ul>
++<li+*ngFor="#elt+of+(list+%7C+async)">{{elt.name}}</li>
</ul>|4442533|我只想说，您需要考虑在Angular2中以不同的方式处理表单(一种更强大的方式；-)。|4442534|希望对你有帮助，蒂埃里|4442535|entityMap^0|0|A|9|18|4|0|F|C|0|0|1T|9|0|0|0|0|3|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]|$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1C|8|@$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1F|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1J|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1K|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1L|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1M|8|@$D|1N|E|1O|F|G]]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1P|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|15|$]]

To complete a bit more previous great answers, you need to be aware that forms leverage observables to detect and handle value changes. It's something really important and powerful. Both Mark and dfsq described this aspect in their answers.

Observables allow not only to use the <code>subscribe</code> method (something similar to the <code>then</code> method of promises in Angular 1). You can go further if needed to implement some processing chains for updated data in forms.

I mean you can specify at this level the debounce time with the <code>debounceTime</code> method. This allows you to wait for an amount of time before handling the change and correctly handle several inputs:

<pre><code>this.form.valueChanges
 .debounceTime(500)
 .subscribe(data =&gt; console.log('form changes', data));
</code></pre>

You can also directly plug the processing you want to trigger (some asynchronous one for example) when values are updated. For example, if you want to handle a text value to filter a list based on an AJAX request, you can leverage the <code>switchMap</code> method:

<pre><code>this.textValue.valueChanges
 .debounceTime(500)
 .switchMap(data =&gt; this.httpService.getListValues(data))
 .subscribe(data =&gt; console.log('new list values', data));
</code></pre>

You even go further by linking the returned observable directly to a property of your component:

<pre><code>this.list = this.textValue.valueChanges
 .debounceTime(500)
 .switchMap(data =&gt; this.httpService.getListValues(data))
 .subscribe(data =&gt; console.log('new list values', data));
</code></pre>

and display it using the <code>async</code> pipe:

<pre><code>&lt;ul&gt;
 &lt;li *ngFor="#elt of (list | async)"&gt;{{elt.name}}&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Just to say that you need to think the way to handle forms differently in Angular2 (a much more powerful way ;-)).

Hope it helps you,
Thierry

blocks|key|4442583|text|我考虑过使用(ngModelChange)方法，然后考虑了FormBuilder方法，最后决定使用方法3的一个变体。这省去了用额外的属性装饰模板，并自动获取对模型的更改-减少了使用方法1或2忘记某些东西的可能性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442584|将方法3稍微简化一下...|4442585|oldPerson+=+JSON.parse(JSON.stringify(this.person));

ngDoCheck():+void+{
++++if+(JSON.stringify(this.person)+!==+JSON.stringify(this.oldPerson))+{
++++++++this.doSomething();
++++++++this.oldPerson+=+JSON.parse(JSON.stringify(this.person));
++++}
}|code-block|syntax|javascript|4442586|您可以添加一个超时，以便仅在x毫秒后调用doSomething()以模拟去抖动。|4442587|oldPerson+=+JSON.parse(JSON.stringify(this.person));

ngDoCheck():+void+{
++++if+(JSON.stringify(this.person)+!==+JSON.stringify(this.oldPerson))+{
++++++++if+(timeOut)+clearTimeout(timeOut);
++++++++let+timeOut+=+setTimeout(this.doSomething(),+2000);
++++++++this.oldPerson+=+JSON.parse(JSON.stringify(this.person));
++++}
}|4442588|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I thought about using the (ngModelChange) method, then thought about the FormBuilder method, and finally settled on a variation of Method 3. This saves decorating the template with extra attributes and automatically picks up changes to the model - reducing the possibility of forgetting something with Method 1 or 2.

Simplifying Method 3 a bit...

<pre><code>oldPerson = JSON.parse(JSON.stringify(this.person));

ngDoCheck(): void {
 if (JSON.stringify(this.person) !== JSON.stringify(this.oldPerson)) {
 this.doSomething();
 this.oldPerson = JSON.parse(JSON.stringify(this.person));
 }
}
</code></pre>

You could add a timeout to only call doSomething() after x number of milliseconds to simulate debounce.

<pre><code>oldPerson = JSON.parse(JSON.stringify(this.person));

ngDoCheck(): void {
 if (JSON.stringify(this.person) !== JSON.stringify(this.oldPerson)) {
 if (timeOut) clearTimeout(timeOut);
 let timeOut = setTimeout(this.doSomething(), 2000);
 this.oldPerson = JSON.parse(JSON.stringify(this.person));
 }
}
</code></pre>

blocks|key|4442827|text|适用于angular+5%2B版本。随着angular做了很多改变，放入版本会有所帮助。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4442828|ngOnInit()+{

+this.myForm+=+formBuilder.group({
++++++firstName:+'Thomas',
++++++lastName:+'Mann'
++++})
this.formControlValueChanged()+//+Note+if+you+are+doing+an+edit/fetching+data+from+an+observer+this+must+be+called+only+after+your+form+is+properly+initialized+otherwise+you+will+get+error.
}

formControlValueChanged():+void+{+++++++
++++++++this.myForm.valueChanges.subscribe(value+=>+{
++++++++++++console.log('value+changed',+value)
++++++++})
}|code-block|syntax|javascript|4442829|entityMap^0|B|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

For angular <code>5+</code> version. Putting version helps as angular makes lot of changes.

<pre><code>ngOnInit() {

 this.myForm = formBuilder.group({
 firstName: 'Thomas',
 lastName: 'Mann'
 })
this.formControlValueChanged() // Note if you are doing an edit/fetching data from an observer this must be called only after your form is properly initialized otherwise you will get error.
}

formControlValueChanged(): void { 
 this.myForm.valueChanges.subscribe(value =&gt; {
 console.log('value changed', value)
 })
}
</code></pre>

In Angular, I might have a form that looks like this:

<pre><code>&lt;ng-form&gt;
 &lt;label&gt;First Name&lt;/label&gt;
 &lt;input type="text" ng-model="model.first_name"&gt;

 &lt;label&gt;Last Name&lt;/label&gt;
 &lt;input type="text" ng-model="model.last_name"&gt;
&lt;/ng-form&gt;
</code></pre>

Within the corresponding controller, I could easily watch for changes to the contents of that form like so:

<pre><code>function($scope) {

 $scope.model = {};

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

}
</code></pre>

Here is an <a href="https://jsfiddle.net/tkambler/1wx5uk34/2/" rel="noreferrer">Angular example on JSFiddle</a>.

I'm having trouble figuring out how to accomplish the same thing in Angular. Obviously, we no longer have <code>$scope</code>, $rootScope. Surely there is a method by which the same thing can be accomplished?

Here is an <a href="http://plnkr.co/edit/P0dtbD0zHy0cEyaJD5ro" rel="noreferrer">Angular example on Plunker</a>.

How to watch for form changes in Angular

JSON

在Angular中，我可能有一个如下所示的表单：<ng-form> <label>First Name</label> <input type="text" ng-model="model.first_name"> <label>Last Name</label> <input type="te...

问如何观察Angular中的表单变化
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何观察Angular中的表单变化EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何观察Angular中的表单变化
EN