I have got the following code. The problem with this is that the validation messages are already are shown before filling. I can't find any example of what I'm doing wrong right now.

Can anybody give me a pointer how this now works in Umbraco 8 (in 7 this worked)

Thanks alot.

Code fragment:

<tr ng-repeat="domain in vm.environment.domains track by $index">
                            <td>
                                <input type="text" id="domain{{$index}}" name="domain{{$index}}" ng-model="domain.name"
                                       required
                                       shield-add-to-form
                                       ng-trim="false"
                                       ng-pattern="/^(http(s)?:\/\/)(([\w-_]+((\.[\w-_]+)+)?)+)(\.[\w]+)?(:[0-9]+)?([\w-_\/]+)?$/i" />


                                <span class="help-inline" val-msg-for="domain{{$index}}" val-toggle-msg="required">
                                    <localize key="Shield.Properties.Validation_Required">Required</localize>
                                </span>
                                <span class="help-inline" val-msg-for="domain{{$index}}" val-toggle-msg="pattern">
                                    <localize key="Shield.Environment.Properties.Validation_DomainInvalid">Invalid Domain</localize>
                                </span>

                            </td>

                            <td>
                                <span class="btn btn-danger" ng-click="vm.environment.domains.splice($index, 1)" ng-if="vm.environment.domains.length > 1 || vm.environment.id === 1">
                                    <localize key="general_remove">Remove</localize>
                                </span>
                            </td>
                        </tr>