Question

我有一个具有多种形式的模板。表格A在表格B中。当我单击表格B的提交按钮时，我不想验证表格A。表单A应该使用自己的“提交”按钮进行验证。

<form #formB="ngForm">
    <input name="input_one" />
    <form #formA="ngForm"
        <input name="input_two" />
        <button type="submit"></button>
    </form>
    <button type="submit></button>
</form>

感谢您的回答。

最诚挚的问候

Answer 1

不允许嵌套html表单，请参见Can you nest html forms?。

但是，您可以使用angular的FormGroup获得所需的功能。见

我举了一个非常简单的例子-> https://stackblitz.com/edit/angular-zuzzy1

如果单击带有标签“ group1”的按钮，它将仅显示表单组group 1内的所有内容的有效性

如果您要自行提交内容/值表单组，则必须自己实现（意味着，添加一个普通按钮，获取表单组的值并手动提交）

但是通常您为一个表单使用一个模型，然后将表单作为一个整体提交。

希望这可以回答问题。

评论后更新

请参阅-> https://stackblitz.com/edit/angular-djks4d?file=src%2Fapp%2Fapp.component.html

如果您单击form B按钮，则无论子组件/子表单的状态如何，它都应始终提醒true。

堆炸弹有两个可能。

在其他组件（hello.component中生成数据，并通过EventEmitter将生成的数据发送到app.component
仅在Form B中使用其他表单（请注意，我没有使用<form>标签，因为根据规范，它不是有效的html）

另一种可能性是根本不创建用于数据创建的表单并手动处理所有内容（例如，在keyup事件或类似事件中）

我个人可能会选择选项1（组件），因为它被正确地分离和可重复使用。

但是两者都可以。

嵌套表单：提交时不验证内部表单

1 个答案: