title: ASP.NET MVC Validation form with AngularJS
body: <p>I'm with a project in MVC 4 and AngularJS (+ twitter bootstrap). I usually use in my MVC projects "jQuery.Validate", "DataAnnotations" and "Razor". Then I enable these keys in my web.config to validate properties of model on the client:</p>
  
  <pre><code>&lt;add key="ClientValidationEnabled" value="true" /&gt;
  &lt;add key="UnobtrusiveJavaScriptEnabled" value="true" /&gt;
  </code></pre>
  
  <p>For example if I have in my model this:</p>
  
  <pre><code>[Required]
  [Display(Name = "Your name")]
  public string Name { get; set; }
  </code></pre>
  
  <p>With this Cshtml:</p>
  
  <pre><code>@Html.LabelFor(model =&gt; model.Name)
  @Html.TextBoxFor(model =&gt; model.Name)
  @Html.ValidationMessageFor(model =&gt; model.Name)
  </code></pre>
  
  <p>The html result would:</p>
  
  <pre><code>&lt;label for="Name"&gt;Your name&lt;/label&gt;
  &lt;input data-val="true" data-val-required="The field Your name is required." id="Name" name="Name" type="text" value="" /&gt;
  &lt;span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>But now when I use AngularJS, I want to render maybe like this:</p>
  
  <pre><code>&lt;label for="Name"&gt;Your name&lt;/label&gt;
  &lt;input type="text" ng-model="Name" id="Name" name="Name" required /&gt;
  &lt;div ng-show="form.Name.$invalid"&gt;
     &lt;span ng-show="form.Name.$error.required"&gt;The field Your name is required&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I do not know if there are any helper or "Data Annotation" to resolve this. I understand that AngularJS has many more features like:</p>
  
  <pre><code>&lt;div ng-show="form.uEmail.$dirty &amp;&amp; form.uEmail.$invalid"&gt;Invalid:
      &lt;span ng-show="form.uEmail.$error.required"&gt;Tell us your email.&lt;/span&gt;
      &lt;span ng-show="form.uEmail.$error.email"&gt;This is not a valid email.&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Well, specifically. I need some helper or "Data Annotation" to resolve the attributes (Data Annotation) for display on the client with AngularJS.</p>
  
  <p>If it still does not exist, perhaps it is time to do, like RazorForAngularJS</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I think perhaps the best way to work with ASP.NET MVC and AngularJS is do it (<code>front-end</code>) by hand (writing all the HTML by hand)</p>