如何使用ngForm对组合组件进行条件验证
ngForm是Angular框架中的一个指令，用于管理表单的验证和状态。它可以帮助开发者轻松地对组合组件进行条件验证。
要使用ngForm对组合组件进行条件验证，首先需要在父组件的模板中创建一个form标签，并使用ngForm指令将其与一个模板引用变量进行绑定，例如：
<form #myForm="ngForm">
<!-- 组合组件的模板 -->
<app-combined-component ngModelGroup="myGroup" #myGroup="ngModelGroup">
<!-- 组件的表单控件 -->
<input name="input1" [(ngModel)]="model.input1" required>
<input name="input2" [(ngModel)]="model.input2" required>
</app-combined-component>
<!-- 其他表单控件 -->
<input name="otherInput" [(ngModel)]="model.otherInput" required>
<!-- 提交按钮 -->
<button type="submit" [disabled]="!myForm.valid">提交</button>
</form>在上述代码中，我们使用ngForm指令将form标签与模板引用变量myForm进行绑定。然后，在组合组件的模板中，我们使用ngModelGroup指令将组件中的表单控件绑定到一个模板引用变量myGroup上，并设置一个名称（例如myGroup）。
接下来，我们可以在父组件的代码中定义一个模型对象（例如model），并在组合组件的表单控件中使用ngModel指令进行双向数据绑定。通过设置required属性，我们可以指定这些控件为必填项。
最后，我们可以在提交按钮上使用myForm.valid来禁用或启用按钮，以根据表单的验证状态来控制提交操作。
需要注意的是，以上示例中的app-combined-component是一个自定义的组合组件，它可以包含多个表单控件。在实际应用中，开发者需要根据自己的需求来创建和使用组合组件。
关于ngForm的更多信息，可以参考腾讯云的Angular文档：ngForm。
相关·内容
2回答
我有一个形式的验证使用角2，角2，只有如何开始验证部分使用下面的方式？
app.component.html：
<form #registrationForm="ngForm" (ngSubmit)="submitform()">
<input type="text" class="form-control" name="name" formControlName="name" />
</form>
app.component.ts：
import {
浏览 0提问于2018-10-12得票数 0
回答已采纳
2回答
在一个角4应用程序中，我有一个模板驱动的表单，控件绑定到组件中的值。当表单输入更改时，绑定到输入的对象立即更改(双向绑定)。单击“取消”按钮时，我希望撤消对绑定对象的更改。这允许用户更改值，然后改变主意并取消更改。
上面的柱塞有一个绑定字段的表单来读取hero.name。
<h2>{{hero.name}} details!</h2>
绑定到英雄对象的输入。
<form #myForm="ngForm" (ngSubmit)="save(myForm)">
<div class="form-gr
浏览 6提问于2017-10-11得票数 8
有多个同级组件，每个组件内部都有不同的NgForm (模板驱动表单)。所有这些组件都包装在一个父组件中。父组件具有验证按钮。我需要在父组件上的按钮上验证单击事件中的某些子NgForm。
你会提出什么方法来解决这个问题？
// Parent template
<child id="0"></child>
<child id="1"></child>
// Parent component
validateChild(id: number) {
// need somehow reach child compon
浏览 5提问于2019-07-17得票数 1
我确实为一个指令编写了一个单元测试，它可以工作，但是我想问我是否可以在没有组件和TestBed的情况下测试它。我可以在这里改变什么，或者我可以改进什么？创建TestComponent的想法和TestBed的想法是什么？
这里是指令的代码。
@Directive({
selector: '[ngModel][endOfSeasonValidation]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => EndOfSeasonValidation
浏览 4提问于2020-01-23得票数 1
回答已采纳
2回答
我正在将AngularJS 1.6应用程序迁移到角12。我在将表单迁移到角模板驱动的表单时遇到了问题：
<form novalidate #myAwesomeForm="ngForm" name="myAwesomeForm">
[...]
</form>
它包含子组件内部的输入字段：
<my-child-component
[model]="myModel"
[fieldId]="'someText'">
</my-child-component&
浏览 2提问于2022-01-24得票数 0
我需要些帮助。我正在尝试创建一个自定义组件，它包装一个下拉值并显示/隐藏默认的--选择--选项，这取决于它是否是必需的。(我希望稍后将其他自定义逻辑应用于此组件)
如何获得通过父控件的反应形式设置的自定义控件中的Validator.required？？
我对角很陌生，但不是AngularJS
父页html：
<div formGroupName="siteType">
<my-dropdownlist
id="siteType"
formControlName="code"
浏览 2提问于2017-08-28得票数 3
回答已采纳
我有一个简单的ngForm，它可以很好地处理字符串输入和单选下拉菜单。我想添加多选下拉菜单，它引入了数组。我正面临着一个奇怪的问题。当我保存/重置表单时，我正在使用form.formReset()，但仍然收到“需要字段验证”的错误消息，刷新会将其清除。 验证问题是在多选之后引入的。我试过几种方法，但没有成功。下面的代码- <form #form="ngForm"
class="form-horizontal"
(ngSubmit)="save(form)">
<inf-modal #modal
浏览 46提问于2020-05-03得票数 0
回答已采纳
7回答
如何创建能够像本机<input>标记一样工作的自定义组件？我希望使我的自定义表单控件能够支持ngControl，ngForm，(ngModel)。
据我所知，我需要实现一些接口，以使我自己的表单控制像本地控件一样工作。
而且，似乎ngForm指令只绑定了<input>标记，对吗？我该怎么处理呢？
让我解释一下为什么我需要这个。我想包装几个输入元素，使它们能够作为一个输入一起工作。有别的办法处理吗？再来一次:我想让这个控件就像本地控件一样。验证，ngForm，ngModel双向绑定等。
ps:我用打字本。
浏览 26提问于2016-01-22得票数 106
回答已采纳
我有一张表格
<form #basic="ngForm">
<div>
<label>Firstname:</label>
<input type="text" name="firstName" ngModel required>
</div>
<div>
<label>Lastname:</label>
<input type="text" name="la
浏览 0提问于2019-06-06得票数 1
我正在尝试为方法编写单元测试： public addCred:boolean=true;
public credName:any;
public addMachineCredential(credentialForm: NgForm) {
this.addCred = true;
this.credName = credentialForm.value.name;
} 在我的测试类中： it('should add machine credential', () => {
var machineCredentialForm: NgForm
浏览 17提问于2019-04-19得票数 0
这里是我的stackblitz演示，清楚地显示了这个问题，我希望：
问题是，我的子sin number组件具有所需的验证器，并且它在本地正确工作，这可以通过*ngIf语句来演示，如果没有输入任何长度为5的内容，则显示“错误”，但是父程序不能访问该错误！我如何克服这个问题？
我想出的一个解决方案是使用NG_VALIDATORS来验证(c:NG_VALIDATORS)，我在演示中将它注释掉(尽管可以取消注释)，但是我更愿意使用子组件模板，这样我就不必在父html中编写必需的内容了。
在本例中，sinNumber1和sinNumber2完全相同，只不过sinNumber2在父级中具有所需的验证器标
浏览 0提问于2018-08-01得票数 1
1回答
我的问题非常类似：
但我找不到合适的答案。是否可以通过isPassive设置为true的HTTP-Post绑定发送请求。Oasis规范说IdP不能“明显地”控制用户界面。因此，IdP必须以某种方式知道用户。
如果用户已在SP端的会话中处于活动状态，我如何将该信息中继到IdP并让其重新验证用户身份？
我想要验证用户，而不会阻碍用户的流程...
浏览 0提问于2017-03-31得票数 3
对于我的一些组件，我希望来回更改输入字段的只读和必需属性。
我已经设法得到了一个运行代码，可以按需更改它们，但问题是它适用于只读，但似乎不适用于required:尽管对required Angular2的元素属性更改仍然认为fieldCtrl是有效的。
这是我的柱塞，我在这里演示了这个问题：
//our root app component
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
providers: [],
template: `
&
浏览 4提问于2016-02-05得票数 26
回答已采纳
我的应用程序中有一个登录按钮，当用户点击它时，请求被发送到服务文件，从那里firebase负责身份验证过程。我的问题是，如果登录成功并设置了令牌，那么我希望使用return 'Login Successful‘，然后在前端将其打印给客户端，以通知登录成功。我尝试了各种方法，但都不能解决这个问题。 Component.ts文件 import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService }
浏览 19提问于2019-03-05得票数 0
6回答
我想要创建一个带有角2的大表单，但是我想用多个组件创建这个表单，如下例所示。
应用程序组件
<form novalidate #form1="ngForm" [formGroup]="myForm">
<div>
<address></address>
</div>
<div>
<input type="text" ngModel required/>
</div>
<input type="submit" [d
浏览 5提问于2017-04-07得票数 79
回答已采纳
问题作为文本
当我将一个封装在组件中的输入添加到我的角度表单中时，表单就不会将该输入作为属于它的控件。这意味着，例如NgForm.valid是不可靠的，因为它不包含从组件中添加的输入。
是什么阻止了这一切，我能做些什么？
问题作为代码：
为什么下面的测试失败，我能做些什么？
import { Component, ViewChild } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModu
浏览 0提问于2019-04-03得票数 1
回答已采纳
2回答
我正在使用一个自定义组件( custom -text)，它具有以下代码
@Component({
selector: 'custom-text, [custom-text]',
templateUrl: './custom-text.template.html',
styleUrls: ['./custom-text.component.scss']
})
export class CustomTextComponent implements OnInit {
const
浏览 7提问于2019-04-26得票数 0
基本上，我有
<form #f="ngForm" (ngSubmit)="save(f.form)" #formElement>
...
<button class="btn btn-primary" #saveButton>Save</button>
</form>
我希望能够从组件触发submit()。我尝试过使用@viewChild('formElement')和renderer.invokeElementMethod来触发click()。
浏览 0提问于2017-11-21得票数 17
回答已采纳
1回答
我正在尝试创建可能具有嵌套表单的组件。我嵌套了它们，因为我希望在多个阶段进行验证，即使我只保存一次。也许我的问题有另一个解决方案，但现在我的代码看起来有点像这样：
<form (submit)="save()" #form1="ngForm">
<form (submit)="accept()" #form2="ngForm">
<!-- #form2 fields -->
<button id="submit2" type="
浏览 0提问于2019-08-21得票数 0
我在一个场景中访问两个不同的NgForms --一个在父窗体#parentform中，另一个在子组件# Child form &# child form 1中，并且我想检查子窗体控件的有效性--是否在父组件表单中有效。如何在angular4中做到这一点。
我还遵循了以下链接：
每次我得到未定义的子组件表单的引用。
我的代码就像这样。
parent.component.html
<form class="form-wrapper" (ngSubmit)="parentForm.form.valid && save()" #pa
浏览 1提问于2017-11-29得票数 1
回答已采纳
1回答
如图所示，我有两个DOMs。问题是第一个模板中带圆圈的<div class=panel-heading largeText">得到的样式是_ngcontent-c1，而同样的得到的样式是class.active -primary> .panel-heading。模板如图3和图4所示。有人知道问题出在哪里吗?在哪里可以找到class.active属性的文档?谢谢。
图1：
图2：
图3：
<div *ngIf="show">
<div class="container">
<div
浏览 2提问于2018-03-01得票数 0
回答已采纳
我是JavaScript和一般堆栈框架的新手。我正在尝试建立一个网页，在登陆页面中应该有一个标题和登录表单。如果用户身份验证良好，则应该将其重定向到主页，否则将重定向到相同的登陆页，并出现一些错误，如Incorrect credentials。我面临一个问题，我可以认证用户，但是当我试图更新主页的组件时，它会显示在登录表单下面，而不是替换登录表单。我需要用主页内容代替登录。
下面是我的app.component.ts
import { Component } from '@angular/core';
import { NgForm } from '@a
浏览 4提问于2017-10-12得票数 0
回答已采纳
我有这样的结构：
<form #myForm="ngForm">
<div class=row>
<app-section-a [myForm]="myForm"></app-section-a>
我的孩子们：
@Component({
...
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
// ...
@Input() myForm: ElementRef;
<input ...>
&l
浏览 4提问于2020-02-17得票数 4
回答已采纳
1回答
在角2模板驱动的表单中，我可以编写
<form #form="ngForm">
[...]
</form>
据我所知，ngForm是FormGroup。如何在相应的组件中获取该对象？
class FormComponent {
formGroup: FormGroup; // How do I have the form INJECTED AUTOMATICALLY by the framework? Something like a ViewChild, but it's not a view
}
它必须很简单，但文档只显示了如何
浏览 0提问于2016-11-30得票数 1
回答已采纳
2回答
情况是这样的：
我有一个角度的形式：
<form #f="ngForm" (ngSubmit) = search(f) novalidate >
<input name="inputCustomerId" [(ngModel)]="customerId" type= "number">
<a type="button" (click)="search(f)">Search</a>
</form>
<app-graph *ngI
浏览 0提问于2021-02-27得票数 2
我正在尝试对我的接口进行双向绑定，但是一直收到'set property of null'？
当我点击触发onSave函数的submit时，我得到了错误消息"Cannot set property 'googleUri‘of null?“。控制台日志输出为null。如何在使用界面时修复此问题？
这是我的界面
export interface User {
googleUri?: string;
}
这是我的组件HTML
<form name="form" (ngSubmit)="onSave()" #f="n
浏览 0提问于2018-10-27得票数 0
1回答
我不喜欢角的任何一种形式验证路线，但我正在研究一种方法，以结合每一个最好的，并接近一个我喜欢的答案。
我知道，无论我选择formBuilder还是ngModel路由，表单都有一个NgForm，它具有一个保存根FormGroup的属性，该根FormGroup具有一个异构的FormControl对象集合。implementing都有一个实现ControlValueAccessor接口的适配器对象，我自己的角度组件(如<date-range-picker> )可以实现相同的接口，并假装是另一个值为任意复杂对象的元素。每个FormControl封装一个元素，通过ControlValueAc
浏览 0提问于2018-07-10得票数 3
There is no directive with "exportAs" set to "ngForm" ("<div class="col-xs-6" id="search-bar-container">
<form [ERROR ->]#myForm="ngForm" (ngSubmit)="doSearch()">
在相应组件的顶部，我有：
import { FormsModule, ReactiveFormsModule } from '@an
浏览 1提问于2016-09-09得票数 1
我正在使用Angular2。我想做表格验证。目前我的模板如下所示：
<form #f="ngForm" novalidate (ngSubmit)="save()">
<input type="checkbox" name="showHydroSystemSelection" [(ngModel)]="cosResponse.showHydroSystemSelection.value" (ngModelChange)="onChange(cosResponse.showH
浏览 3提问于2016-09-21得票数 2
两者之间的区别是什么：
<form #form="ngForm">
和
<form [ngFormModel]="form">
什么时候你会使用其中一个而不是另一个呢？
浏览 2提问于2016-01-30得票数 26
回答已采纳
1回答
假设我有以下形式：
<form #form="ngForm">
<div *ngFor="let action of member_plan.actions">
<div class="container">
<h4 class="text-sm-center black mb-3">{{findActionTitle(action)}}</h4>
<div class="col-sm-
浏览 0提问于2019-01-23得票数 3
1回答
我有一个角度反应形式与一个单一的输入字段，这是必要的。当用户单击此字段并单击“走开”时，它将触发验证，并显示该字段由于验证失败而显示为红色。
如何控制验证何时到位？我只希望当用户点击“进入”或单击“字段”旁边的按钮图标时，检查验证。
我尝试将updateOn：'blur‘或updateOn：'submit’添加到formControl中，这似乎并不能在单击字段时显示验证。但是，这也会导致表单在单击按钮图标时显示为“无效”，即使字段中有文本。
下面是这个问题的一个工作示例：
组件文件
<form [formGroup]="empForm" #empFormD
浏览 2提问于2021-11-25得票数 0
2回答
我有一个窗体进入引导模式，当用户单击submit按钮时，我想关闭该模式。看起来是这样：
export class AddPartModalComponent implements OnInit {
@Input() id:number;
closeResult: string;
constructor(private modalService: NgbModal, private graphService:GraphService) { }
ngOnInit() {
}
open(content) {
this.modalService.open(con
浏览 1提问于2019-08-05得票数 0
回答已采纳
我有一个简单的表格，看起来像这样
<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>
并需要提交表单并从外部检查其有效性。
例如：要么以编程方式提交，要么使用位于<button type="submit">标记之外的<form>。
浏览 11提问于2016-06-27得票数 70
回答已采纳
2回答
如何访问茉莉花中的模板引用/变量？
form.component.html
<form #f="ngForm" class="form form-profession" novalidate>...
<div class="error-group" *ngIf="f.invalid">error</div>
form.component.ts
export class FormComponent implements OnInit {
@ViewChild('f') f:
浏览 1提问于2018-07-03得票数 1
回答已采纳
3回答
我是新的角，在我的形式，我有三个字段名称，电子邮件和无线电部分。我的要求是：
当我选择“名称”单选按钮名称时，需要输入字段。
当我选择电子邮件单选按钮时，电子邮件输入字段是必需的。
我试过了但没有结果。如何实现此要求？
.html：
<form class="example-form" [formGroup]="emailForm">
<!-- Name -->
<mat-form-field class="example-full-width">
<in
浏览 0提问于2018-11-01得票数 2
我刚更新到9角！突然，我得到了一个例外：Error occurs in the template of *, error NG8003: No directive found with exportAs 'ngForm'
下面是模板：
<form (ngSubmit)="onLogin(frm.value)" #frm="ngForm" style="margin:0 auto;"> //All of these was working fine before the update
我还进口了FormsModule，
浏览 1提问于2020-06-02得票数 3
回答已采纳
2回答
我需要在一个使用模板驱动的表单动态生成的表中使用多个表单，它的工作方式和我做的一样好，但我不确定它是否正确。 <div *ngFor="let row of rows">
<form #f="ngForm" (submit)="submit(f)">
...
</form>
</div> #f将被定义很多次，我想知道这是否会导致问题？我最终可以给出一个动态命名(如果可能的话？)，但由于它是以这种方式工作的，所以我不想让它过于复杂。
浏览 20提问于2021-03-28得票数 0
回答已采纳
1回答
我想确保用户在跳转到其他页面之前提交表单，所以当用户在表单中键入内容时，如果他们还没有提交，但试图点击链接转到其他页面，它应该会弹出错误对话框。
然而，我真的不知道如何在Angular的NgForm中做到这一点……
下面是我的模板，使用模板驱动
<h2>My Form </h2>
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
<div class="form-group">
<label for="name"
浏览 3提问于2018-06-29得票数 0
我需要将父组件的表单注入子组件，以便能够像这样验证子组件输入：
<form #formReference="ngForm">
<child-component></child-component>
<child-component></child-component>
<child-component></child-component>
<p>{{formReference.form.valid}}</p>
&l
浏览 16提问于2021-10-01得票数 0
回答已采纳
2回答
我使用嵌套的反应形式作为FormControl。
这是演示
问题:即使嵌套无效，主窗体也是有效的(请尝试清除必填字段)。
如何通知主窗体有关嵌套窗体有效性的更改？
主要的表单组件：
import { Component, Input } from '@angular/core';
import { FormBuilder, FormGroup, ControlContainer, NgForm, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
te
浏览 6提问于2018-12-15得票数 0
当嵌套子窗体无效时，我要禁用父窗体上的按钮。
这是父窗体组件：
<hello name="{{ name }}"></hello>
<h2>Complex form with address component</h2>
<form #myForm="ngForm">
<div>
<label>Firstname:</label>
<input type="text" name="firstName" ngMo
浏览 0提问于2021-04-28得票数 0
在Angular(5)中，我试图为模板驱动的表单编写一组可重用的表单控件。它需要能够从父组件中获取模型，并将其传递给元素以进行双向数据绑定。
这就是我所拥有的。
admin-panel.component.ts (父窗体)
import { Component, OnInit } from '@angular/core';
import{ NgForm } from '@angular/forms';
@Component({
selector: 'admin-panel',
template: `
<label>S
浏览 0提问于2018-05-04得票数 0
1回答
我有两个文本框的角html名称和日期..。但是我没有用任何模型来描绘这个。如何对此进行验证？
当我谷歌所有的验证都是基于ngModel。如何对非模型属性的组件属性进行验证？
提前谢谢。
编辑：
<form #dartForm='ngForm' (ngSubmit)='onSubmit(inputName.value, inputDate.value)'>
<div class="row">
<div class="form-group col col-12">
浏览 1提问于2019-06-06得票数 0
回答已采纳
在我的代码下面有一个表单，输入很少。我要在提交时得到所有的值。能够使用ngModel获取所有元素值。如何获得选择选项选定的值。
<form #f="ngForm" (ngSubmit) = "saveData(f)">
<fieldset>
<legend>Your Details:</legend>
<label>Name: <input type="text" name="name" size="30" maxlength=&#
浏览 2提问于2017-04-10得票数 1
回答已采纳
2回答
我必须说，我完全被网络上关于RC5角度形式的不同教程搞糊涂了。官方文件也没有消除混乱。
大量的指令(ngForm，ngModel，ngFormControl，ngControl，ngFormControlName，ngControlName，我错过了什么吗？)有些人反对，有些人不赞成。
另外，所有的教程都采用简单的路径--纯文本输入或选择控件。如果我需要单选按钮和复选框呢？
简而言之，我不知道如何用RC5编写表单。
有没有什么地方的例子，是最新的，并解释：
4种基本控件的使用-输入文本/无线电/复选框和选择？
额外的好处，比如肮脏/原始，验证？
表单模型(FormBuilder，F
浏览 4提问于2016-08-28得票数 5
回答已采纳
<input type="text" class="form-control" name="referenceNo/LIKE" placeholder="{{'referenceNo' | translate}}" ngModel>
@ViewChildren(forwardRef(() => NgModel)) inputs: QueryList<NgModel>;
for (let input of this.inputs.toArray()) {
//change valu
浏览 0提问于2018-10-01得票数 2
回答已采纳
1回答
我在理解模板变量引用(当与NgForm一起使用时)有一个小问题，下面是angular2文档中的内容：
<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
<button type="submit" [disabled]="!theForm.form.valid">Submit</button>
</form>
theForm的价值是什么？
如果HTMLFormElement没有接管的话，那就是它了。它实际上是ngFor
浏览 3提问于2016-12-12得票数 1
回答已采纳
我有一个父角形式，我希望在许多子组件中使用。为此，我指示我的子组件重用父表单：
viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
在我的子组件中，我创建了一个新的ngModelGroup。在所有输入都有效之前，整个表单不应该是有效的，但是我也想知道我的一些子组件的有效性。
是否有任何方法来确定我的ngModelGroup的有效性？
下面是一次堆栈闪电战，演示我的方法。我希望能够检查sub.Component.html的子表单组中输入的验证。
浏览 4提问于2022-01-04得票数 0
我有一个类似于(简化版)的表单：
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<!-- other inputs without data binding -->
<input
type="text"
id="item-input"
[ngModel]="myService.getCurrentItem().name"
name="item"
#item="ngMod
浏览 1提问于2017-05-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
