角度表单不能在表格中工作 [英] Angular form not working in a table

问题描述

 < div class =row> 
我创建了一个放置在表格下方的工作表单。 
< form class =form-signinng-submit =controller.add.save（）> 
 
< label for =inputNameclass =sr-only>名称< / label> 
< input type =textname =nameid =inputNameclass =form-controlplaceholder =Namerequired autofocus ng-model =controller.add.name> 
< label for =inputDescriptionclass =sr-only>描述< / label> 
< textarea name =descriptionid =inputDescriptionclass =form-controlplaceholder =Descriptionng-model =controller.add.description> 
< / textarea> 
< button class =btn btn-lg btn-primary btn-blocktype =submit> Add< / button> 
< / form> 
< / div> 
  

然后我决定将表单移动到上面的表格中;

 < tr> 
< form ng-submit =controller.add.save（）> 
< td>新增一项< / td> 
< td>< input type =textname =nameid =newNameclass =form-controlplaceholder =Namerequired ng-model =controller.add.name >< / TD> 
< td>< textarea name =descriptionid =newDescriptionclass =form-controlplaceholder =Descriptionng-model =controller.add.description>< / textarea> ;< / TD> 
< td>< button class =btn btn-xs btn-primarytype =submit> Add< / button>< / td> 
< / form> 
< / tr> 
  

但现在表单不再工作。
我在做什么错误？

解决方案

你在做的方式，不会正确地在页面上呈现html ，因为它按照表格标准无效的html。基本上，在渲染页面上的HTML时，html渲染器会抛出表标签。因此，对于表格标签中的表单，您可以使用 ng-form 属性，而不是使用格式元素。

但通过使用 ng-form 指令，你不能有 ng-submit 指令，你应该提交一个表单仅通过按钮。

Html

 < tr ng-form =myForm> 
< td>新增一项< / td> 
< td>< input type =textname =nameid =newNameclass =form-controlplaceholder =Namerequired ng-model =controller.add.name >< / TD> 
< td>< textarea name =descriptionid =newDescriptionclass =form-controlplaceholder =Descriptionng-model =controller.add.description>< / textarea> ;< / TD> 
< td>< button class =btn btn-xs btn-primarytype =buttonng-click =controller.add.save（）> Add< / button>< TD> 
< / tr> 
  

有关表格结构化的更多详细答案，可以参考<强>此答案

I created a working form placed in a div below a table;

<div class="row">
  <form class="form-signin" ng-submit="controller.add.save()">
    <h2 class="form-signin-heading">Add an item:</h2>
    <label for="inputName" class="sr-only">Name</label>
    <input type="text" name="name" id="inputName" class="form-control" placeholder="Name" required autofocus ng-model="controller.add.name">
    <label for="inputDescription" class="sr-only">Description</label>
    <textarea name="description" id="inputDescription" class="form-control" placeholder="Description" ng-model="controller.add.description">
    </textarea>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Add</button>
  </form>
</div>

I then decided to move the form into the table above;

<tr>
  <form ng-submit="controller.add.save()">
    <td>Add an item</td>
    <td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
    <td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
    <td><button class="btn btn-xs btn-primary" type="submit">Add</button></td>
  </form>
</tr>

But now the form doesn't work anymore. What am I doing wrong?

解决方案

The way you are doing, will not render the html correctly on the page, because its invalid html as per table standards. Basically behind the scene html renderer will throw out this from out of the table tag while rendering the html on page. So for having form inside table tag, you could use ng-form attribute instead of having form element.

But by using ng-form directive you can't have ng-submit directive, you should submit a form via button only.

Html

<tr ng-form="myForm">
    <td>Add an item</td>
    <td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
    <td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
    <td><button class="btn btn-xs btn-primary" type="button" ng-click="controller.add.save()">Add</button></td>
</tr>

For more detailed answer about structuring of table, you could refer this answer

这篇关于角度表单不能在表格中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！