Add and document the pattern for forms and validation in components with collections of items

[rynowak]

Consider a model like:

public class Person
{
    public string Name { get; set; }

    public List<Contact> EmergencyContacts { get; set;  }
}

public class EmergencyContact
{
    public string Name { get; set; }

    public string PhoneNumber { get; set; }
}

How we would write a form that lets you add a dynamic number of emergency contacts? I tried this during some app building time, and there are some problems with it that we could make better.

Issue 1

Doing the most obvious thing with a collection throws an IndexOutOfRangeException.

This works fine if you do it like this:

Issue 2

Validation doesn't automatically traverse the members of something so you have to manually add validation support for any sattelite objects you want validated.

Example: https://github.com/rynowak/ComponentFunTime/blob/master/Components/Shared/EmployeeEditor.razor#L85

[Andrzej-W]

@rynowak issue 1 is related to this original post:
aspnet/Blazor.Docs#371 (comment)
It was moved here:
dotnet/AspNetCore.Docs#10768
Unfortunately it is now closed and change in the doc is in my opinion to small - it only mentions lambda expressions. I can bet that people will have problems with binding also and your example is the best proof of it.

[SteveSandersonMS]

Doing the most obvious thing with a collection throws an IndexOutOfRangeException.

One mitigating factor is that the really most obvious thing (foreach) actually does work.

Of course I do agree we should look for a good fix for the for case too though!

[danroth27]

For the issue with closing over a loop variable we're considering adding an analyzer to detect that situation: #10476

[danroth27]

I've filed #10526 to separately track the feedback that validation doesn't automatically traverse members. Closing this issue.