Angular2 -如何将表单上的`touched`属性设置为true
Angular2是一种流行的前端开发框架，用于构建Web应用程序。在Angular2中，要将表单上的touched属性设置为true，可以使用以下步骤：
- 在组件的HTML模板中，使用Angular2的表单指令来创建表单。例如，可以使用
ngForm指令来创建一个表单，并使用ngModel指令来绑定表单控件的值。
<form #myForm="ngForm">
<input type="text" name="myInput" [(ngModel)]="myValue">
</form>- 在组件的类中，定义一个属性来表示表单控件的状态。例如，可以使用
FormControl类来创建一个表单控件，并使用markAsTouched方法将touched属性设置为true。
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'my-component',
template: `
<form #myForm="ngForm">
<input type="text" name="myInput" [(ngModel)]="myValue">
</form>
`
})
export class MyComponent {
myValue: string;
myInputControl: FormControl;
constructor() {
this.myInputControl = new FormControl();
}
markInputAsTouched() {
this.myInputControl.markAsTouched();
}
}- 在需要的时候，调用
markAsTouched方法来将表单控件的touched属性设置为true。例如，可以在提交表单或验证表单时调用该方法。
<form #myForm="ngForm">
<input type="text" name="myInput" [(ngModel)]="myValue">
<button (click)="markInputAsTouched()">Submit</button>
</form>这样，当用户与表单交互时，例如点击输入框并离开，markAsTouched方法将被调用，将表单控件的touched属性设置为true。
关于Angular2的更多信息和示例，请参考腾讯云的Angular2开发文档和相关产品：
- Angular2开发文档：https://angular.io/docs
- 腾讯云Serverless Framework：https://cloud.tencent.com/product/sls
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod
请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行评估。
相关·内容
1回答
角ReactiveForm以编程方式触发验证
angular、angular-forms
假设模板中有如下代码片段：
<form #myForm="ngForm">
<md-input-container>
<input mdInput name="address" [formControl]="addressCtrl" [(ngModel)]="address" required>
</md-input-container>
</form>
这个组件有这样的东西：
export class AddressComponent {
@
浏览 2提问于2017-07-14得票数 2
回答已采纳
2回答
从NgForm检索NgModel
angular、typescript、angular2-template、angular2-forms
我想知道是否有任何方法可以检索从所属表单的NgForm.controls对象中拉出的FormControl的NgModel，或者直接从表单中检索NgModel。
我有一个表单，在提交时，我将其作为参数传递给我定义的函数：
<form #myForm="ngForm" name="myForm" (ngSubmit)="myFunc(myForm)">
<input type="text" name="myInput" ngModel #myInput="ngModel">
浏览 48提问于2017-08-07得票数 3
4回答
Angular手动更新ngModel并将表单设置为脏或无效？
angular、typescript、angular4-forms
我有一个表单和一个像这样的底层模型
从组件
myTextModel: string;
updateMyTextModel(): void {
this.myTextModel = "updated model value";
//todo- set form dirty (or invalid or touched) here
}
Html模板
<form #testForm="ngForm" id="testForm">
<input type="text" id="myText&#
浏览 140提问于2017-12-01得票数 13
回答已采纳
3回答
Angular:从NgForm调用自定义输入组件中的markAsDirty()
javascript、forms、validation、angular
我实现了一个自定义组件，它是NgModel输入的包装器。我用ControlValueAccessor把它们连接起来了。它工作得很好，我可以很容易地从我的父组件中访问值。
但是如果我尝试调用markAsDirty()，那么被触摸的标志只在我的组件上改变，它对我在组件中的输入没有影响。我给你举个例子：
// Parent Component
onSubmit(form: NgForm) {
this.form.controls.registerEmail.markAsDirty();
}
// Thats how the component looks like in my form:
浏览 8提问于2017-04-27得票数 14
1回答
在这个用例中，ngModel指令究竟是如何工作的？
angular、angular-directive、angular-ngmodel
我是一个完全的角度初学者，我对NgModel指令及其可能的用例有一些概念上的怀疑。
阅读角官方文档：
我只能读到：
从域模型创建FormControl实例，并将其绑定到窗体控件元素。
在我看来，这个FormControl应该是一个对象，它保存插入到表单字段和相关字段状态中的值(例如，对于验证文档)。这是正确的吗？现在，我对具体的用例有了一些怀疑。
那么，让我们举一个例子。
我有一张表格：
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<div class="form-gr
浏览 6提问于2020-05-06得票数 1
回答已采纳
2回答
模板驱动的带有组件的表单
angular
如何将模板驱动控件添加到ngForm中？
例如，我的表单有两个组件：
@Component({
selector: 'parent-form',
template: '<form #form="ngForm">
<input required [(ngModel)]="model.foo" name="foo">
<child-form [model]="model"></child-form>
</for
浏览 4提问于2016-06-25得票数 1
回答已采纳
2回答
有多个同级组件，每个组件内部都有不同的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
6回答
Angular2嵌套模板驱动表单
angular、angular2-forms
这是疯狂的，看起来没有办法有一个形式，它的输入之一是在一个子组件。
我已经阅读了所有的博客，教程和所有的东西，没有办法解决这个问题。
问题是当子组件有任何类型的表单指令( ngModel、ngModelGroup或其他.)时，它就无法工作。
--这只是模板驱动的表单中的一个问题
这是：
import { Component } from '@angular/core';
@Component({
selector: 'child-form-component',
template: `
<fieldset ngModelGroup="
浏览 12提问于2016-08-31得票数 73
1回答
忽略Angular2表单ng模型
angular、angular2-forms
下面有一个带有ng模型"user.account.emailFAKE“的表单，但是如果我打印该表单var，则有以下输出：
{“名称”：“填写名称”，“帐户”：{“电子邮件”：“电子邮件地址”，“确认”：“确认电子邮件”}}
ngModel名称被完全忽略了吗？
<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm">
<label>
<span> Full name</span>
<input
type=
浏览 0提问于2017-08-02得票数 0
2回答
对于输入字段，ngModel 'valid‘参数始终为true
angular、angular-forms
尝试向AgularJS中的表单添加验证，检查firstName字段是否有效，使用ngIf，
由于某些原因，不管给定的输入是什么，参数总是返回true。为什么会这样呢？
为了同样的目的，我可以检查firstName.value == ""吗？
代码：
<form>
<div class="form-group">
<label for="firstName">First Name :</label>
<input ngModel name='fir
浏览 0提问于2019-10-30得票数 0
3回答
在提交中以角4反应形式显示验证消息
angular、forms、typescript、angular-reactive-forms
我使用的是角4，反应性表单。当用户单击Submit/Create按钮时，我想显示验证错误信息。这是我正在使用的HTML和类型记录代码。
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<input type="text"
id="firstname"
name="firstname"
浏览 4提问于2017-06-27得票数 10
回答已采纳
2回答
角4反应窗体自定义验证器形式错误c:未定义
angular
我有一个自定义验证器来计算2个控制器值；totalDisch应该比damaNumb更多
组件文件：
form = new FormGroup({
hospital: new FormControl({ value: '', disabled: true }, Validators.required),
department: new FormControl('', Validators.required),
damaDt: new FormControl('', Validators.required),
d
浏览 4提问于2017-11-25得票数 0
3回答
如何使angular2组件ng无效
angular、angular2-template、angular2-forms
我需要编写一个可以在表单中使用的组件。我想以ng-无效的形式发布它。
这是我的表单模板/视图：
<form #myForm="ngForm">
<domain-base-value [(ngModel)]="value.value" name="bla" #bla="ngModel">
</domain-base-value>
<div [hidden]="myForm.valid || myForm.pristine"&
浏览 5提问于2016-06-30得票数 2
回答已采纳
1回答
表单验证禁用按钮
javascript、html、angular、validation
我有一些建议
<div class="data">
<underline-input id="name" name="name" [(ngModel)]='this.header.patient.givenName' required #name="ngModel" pattern="^([A-Za-z-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+[,.]?[ ]?|[A-Za-z-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+[&#
浏览 0提问于2017-09-04得票数 0
1回答
传递角度表单数据
angular、typescript、forms、angular-forms
我试图将一个角度表单的数据传递给外部服务，然而，基本表单返回一个空对象，并阻止任何进一步的处理。一直无法确定问题所在。我能够完成一个几乎与此完全相同的插入表单。 提前感谢您的任何建议。 我的表单 <div class="col-md-6">
<form #currentItem="ngForm" (ngSubmit)="updateItem(currentItem.value)" autocomplete="off" novalidate>
<div class=&
浏览 10提问于2020-08-21得票数 0
2回答
显示来自另一个HTML元素中一个元素的自定义指令的结果
angular
我希望将自定义验证指令的输出消息显示到表单上的另一个HTML元素中。如何捕获/引用自定义指令(no-special-chars.directive.ts)的输出？ 指令(no-special-chars.directive.ts) import { Directive } from '@angular/core';
import { Validator,
FormControl,
NG_VALIDATORS,
ValidationErrors} from "@angular/forms";
@Direct
浏览 14提问于2019-03-09得票数 0
回答已采纳
7回答
单击按钮上的angular2验证表单
angular、angular2-forms
如果我使用button type="submit"提交表单，表单验证消息就会出现，一切都很好。但是，如果我有一个带有(click)="myhandler()"的按钮(或链接)，那么验证就不会出现。
我怎样才能做到：
将元素标记为需要运行验证器，或
以编程方式运行和显示验证消息。
注意:这些都是简单的验证，如输入字段所需的验证。
样本代码：
<form (ngSubmit)="save()">
<input required type='text'
浏览 8提问于2016-04-12得票数 18
2回答
如果ngmodel或表单是脏的或有输入，请检查
angular、typescript、angular-material
如何在angular中检查ngmodel或表单是脏的或有输入使用表单域，但不使用formgroup。 我想检查是否有5个输入字段有值或脏，我想要像消息一样显示，但我们如何检查，例如，来自DealFields或ngModel dealDispositionFormFields的5个字段是否有值或有输入？谢谢你。 #tscode class DealDispositionFormFields {
dealName:string;
summary:string;
dealDispositionType: string;
termination
浏览 28提问于2021-10-01得票数 1
回答已采纳
1回答
我有一个内置在Angular 7中的库自定义表单组件。每个组件都是原生input、textarea、checkbox元素的包装器。我已经实现了ValueAccessor，使它们可以与ngModel和formControl/formControlName一起工作。在声明式使用的情况下，事情运行得很好。 对于ex。 <custom-textbox label="Name" required formControlName="name"></custom-textbox> 在我的用例中，我必须从JSON动态创建自定义表单组件，我已经使用Com
浏览 11提问于2019-02-12得票数 0
2回答
在Angular中动态禁用FormControl的反应形式
typescript
我正在尝试禁用我的FormControl组中的一个单选按钮，但这是不可能的。在ts文件中将状态改为disable: true将禁用一组单选按钮，而不仅仅是单个单选按钮。我的html： <form [formGroup]="myForm">
<radiobutton-group>
Food:
<radiobutton [FormControl]="myForm.get('food')" value="apple"></radiobutton>
<r
浏览 26提问于2020-06-19得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
