Page 20 - MSDN Magazine, June 2018

®
Instantly Search Terabytes
dtSearch’s document filters support: • popular file types
• emails with multilevel attachments • a wide variety of databases
• web data
Over 25 search options including:
• efficient multithreaded search •
• forensics options like credit card search
• SDKs for Windows, UWP, Linux, Mac, iOS in beta, Android in beta
• FAQs on faceted search, granular data classification, Azure and more
Visit dtSearch.com for
• hundreds of reviews and case studies
• fully-functional enterprise and developer evaluations
The Smart Choice for Text Retrieval® since 1991
easy
multicolor
hit-
highlighting
Developers:
• APIs for .NET, C++ and Java; ask about new cross-platform .NET Standard SDK with Xamarin and .NET Core
dtSearch.com 1-800-IT-FINDS
Notice that the valueChanges property is actually a stream of events. Thus, I use forEach to indicate that for each event that comes through, I want to take the value to which the control has changed (the parameter to the lambda) and use that to find the speaker by last name in the array returned by the SpeakerService. I then take that Speaker instance and pass it to the populate method, shown here:
export class SpeakerDetailComponent implements OnInit { // ...
populate(speaker) {
const firstName = this.speakerForm.get('firstName'); const lastName = this.speakerForm.get('lastName'); const age = this.speakerForm.get('age');
firstName.setValue(speaker.firstName); lastName.setValue(speaker.lastName); age.setValue(speaker.age);
}
// ... }
The populate method simply grabs the reference to the Form- Controls from the speakerForm group, and uses the setValue method to populate the appropriate value from the Speaker to the appropriate control.
The developer retains full control over what happens when.
Reactive Analysis
A fair question to ask at this point is how this is any better than the template-based forms shown earlier. Frankly, it’s not a question of better—it’s a question of different. (The Angular docs even say this outright in the official documentation page on Reactive Forms at angular.io/guide/reactive-forms.) Capturing most of the logic in the component code (rather than in the template) may strike some developers as being more logical or cohesive, but reactive forms also have the advantage that they’re essentially a reactive “loop”: Because the controls don’t directly map to the underlying model object. The developer retains full control over what happens when, which can simplify a number of scenarios immensely.
The Angular team doesn’t believe that one approach to forms is inherently any better than the other, in fact specifically stating that both styles can be used within the same application. (I wouldn’t try to use both within the same component, however, unless you under- stand Angular really deeply.) The key here is that Angular supports two different styles of gathering input from users, and both are valid and viable for a good number of scenarios. But what happens if you have a large number of different forms that need to be displayed, or the form that needs to be displayed depends on the underlying model object, which can change? Angular offers yet another option, which you’ll see in the next column. Happy coding! n
Ted Neward is a Seattle-based polytechnology consultant, speaker and mentor, currently working as the director of Engineering and Developer Relations at Smartsheet.com. He has written a ton of articles, authored or co-authored a dozen books, and speaks all over the world. Reach him at ted@tedneward.com or read his blog at blogs.tedneward.com.
ThaNks to the following Microsoft technical expert: Garvice Eakins
The Working Programmer