Iterate two arrays simultaneously with one foreach statement in C#

Let’s say that you have two lists or two arrays that you wish to combine.  One has a list of first names, the other a list of last names.  The list items are in the correct order so that the first name would match the last name for a given ordinal number.  But the lists may not have the same lengths (i.e. one list is not as complete as the other).  We wish to match all of the available first and last names until we run out of matching pairs.

So, what do we do?

For two arrays, we could use a “for int” loop.  We could get the size of each array by calling its Length property. And then we can compare which length is smaller; and use that number as our loop’s upper boundary.  We could then use the indexer to refer to each element in turn.  But this solution is rather inelegant.

For two lists, we should not use a “for int” loop, since lists do not have the concept of indexers.  We cannot refer to individual elements of the list via an index.  We can instead use a “foreach” loop.  But how do you refer to corresponding elements from 2 lists with each loop iteration?

This is where the Linq’s Zip method comes in very handy.  With the Zip method, we can apply a specific function to the corresponding elements of two sequences and produce a sequence of the results.

Using the above scenario as an example, where we have 5 first names but only 4 last names, we can write the following code:

The Output is below.

You will notice that the Zip function stopped after its 4^th iteration.  In this way, we don’t have any incomplete names.

That’s it for now.  I hope this tip has been super helpful.

Angular2 Custom Pipes on Two-Way Bound Input Controls

In my previous blog, I showed you how to create a custom pipe for phone numbers.  If you haven’t read it yet, I recommend that you do so before continuing with this article.  Click here for that blog. 

The custom pipe works great for formatting data in labels (i.e. one-way bound controls).

But what if you wanted to apply the custom pipe to an input control, and have it bind bi-directionally?  That is, the data from the data model is formatted in the view, and the data entered by the user is automatically validated and formatted as well?  What if you wanted to do something like the code below?

When you run this code, Angular2 will complain and throw a nasty exception like the one below:

The code is failing exactly for the reason that you see in the error message: You cannot use a pipe in an action expression, which is what the two-way binding of the input control is.  Double binding with pipes will not work.  Angular2 does not support it.

So, what do we do then?  Well, I’m glad you asked.

While we cannot do two-way data binding, we can still do one-way bindings.  We can break down what we are trying to do into two one-way data bindings, so that we format on the way out, and validate and format on the way in.  For this trick, we will need to listen to the Angular2 “ngModelChange” event for the input control. 

We filter the “ngModel” through our custom pipe, and we wire up our data model to the “ngModelChange” event.  Our code would now look like this:

Now your input control would exhibit behavior similar to a two-way-bound control, with the benefit of a pipe filter.  That's it.

I’d like to add a bonus tip.  If all you are looking for is to have the phone number formatted a certain way, and you did not want to take the trouble of building a custom pipe, then you can take advantage of HTML5’s new Phone Number Input Type Form Validation. 

This is simply an HTML5 input control with type=”tel” and a pattern attribute with the phone number regular expression that you would like to validate against.  You also have the option of adding a title, which would serve as a “hint” to the user.  It would require your user to comply with the pattern, but it would ensure that the input is valid.  Your markup code would now look like below:

When your user attempts to submit an invalid entry, the user would get a friendly error message and a hint.

And that is how you take advantage of HTML5’s built-in phone number input type form validation.

In this blog, I showed you how to make use of pipes in an input control that is intended to bind both ways.  I also showed an alternative way to validate two-way-bound input controls using HTML5 form validation.