Creating Advanced Forms
<label>Confirm Password</label>
<input ng-model="user.password2" type="password" required>
</ng-form>
</script><form name="form1" novalidate>
<legend>User Form</legend>
<label>Name</label>
<input ng-model="user.name" required>
<ng-include src="'password-form'"></ng-include>
</form>Try it at http://bit.ly/10QWwyu.
We define our subform in a partial template. In this case it is inline in a script block
but it could be in a separate file also. Next we have our container form, form1,which
includes the subform by using the ngInclude directive.
The subform has its own validity state and related CSS classes. Also, notice
that because the subform has a name attribute, it appears as a property on the
container form.
Repeating subforms
Sometimes, we have fields in a form that needs to be repeated by an arbitrary
number of times based on the data in the model. This is a common situation
where you want to provide a single form that can display a one-to-many
relationship in the data.
In our SCRUM app, we would like to allow users to have zero or more website
URLs in their User Info profile. We can use an ngRepeat directive to set this up:
<form ng-controller="MainCtrl">
<h1>User Info</h1>
<label>Websites</label>
<div ng-repeat="website in user.websites">
<input type="url" ng-model="website.url">
<button ng-click="remove($index)">X</button>
</div>
<button ng-click="add()">Add Website</button>
</form>