如何在反应式表单中检查表单控件是否被禁用
在反应式表单中，可以通过以下步骤来检查表单控件是否被禁用：
- 获取表单控件的引用：首先，需要在组件类中使用
@ViewChild装饰器来获取表单控件的引用。例如，如果要获取一个名为myControl的表单控件，可以在组件类中添加以下代码：
@ViewChild('myControl') myControl: ElementRef;- 检查控件的禁用状态：通过访问
nativeElement属性，可以获取到表单控件的DOM元素。然后，可以使用disabled属性来检查控件是否被禁用。例如，可以在组件类的某个方法中添加以下代码：
const isDisabled = this.myControl.nativeElement.disabled;- 处理禁用状态：根据需要，可以根据控件的禁用状态执行相应的操作。例如，可以根据
isDisabled变量的值来显示或隐藏其他元素，或者执行其他逻辑。
反应式表单是Angular框架中用于处理表单的一种方式，它提供了一种响应式的方法来处理表单数据和验证。通过使用反应式表单，可以更方便地管理表单控件的状态和值，并进行表单验证。
在腾讯云的产品中，与表单相关的服务包括云函数（SCF）、云数据库（CDB）、云存储（COS）等。这些产品可以与Angular框架结合使用，实现更强大的表单处理功能。具体的产品介绍和使用方法可以参考腾讯云官方文档。
请注意，本回答仅提供了一种实现反应式表单中检查表单控件是否被禁用的方法，实际应用中可能还有其他的实现方式。
相关·内容
我有一个反应式表单，我在表单中使用了一个数组，我的实现如下所示
testForm:FormGroup;
fb is instance of FormBuilder;
this.testForm=this.fb.group({
testarray:this.fb.Array([
note:['']
])
})
我在我的html上使用上面的数组来显示注释。这里的功能就像用户可以添加多个注释。
当我发布时，我想禁用和启用数组的笔记，当时我想识别哪个没有发布，需要禁用该笔记。
这里我的问题是，我们如何使用angular 2 typescript禁用反应式窗体数组属性？
请帮帮我谢
浏览 0提问于2017-07-16得票数 0
5回答
我有一个反应式。在编辑时，我想禁用一个控件。
以下是工作原理：
this.myForm.controls['analysis_horizon'].disable();
但是，密钥analysis_horizon不再在我的myForm.value散列中。
如何禁用具有反应式表单的字段，但保持表单值的哈希值？
我尝试过disabled=，但得到的结果如下：
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to tr
浏览 0提问于2017-02-12得票数 43
1回答
我知道这是一个简单的问题，但它不想工作…我有一个带有验证的反应式表单，我只想在表单组无效时禁用该按钮。 我知道怎么解决这个问题。就在这条线上..通常: disabled="!fg_profile“，但该按钮始终处于启用状态。单击按钮后，我让控制台输出表单组的状态，并显示表单组无效(false)。但按钮仍然是启用的..。 <button type="button" class="btn btn-primary pull-right"
(click)="updateProfile(fg_profile.valu
浏览 9提问于2019-04-02得票数 0
我使用的是Angular 11和一个带有表单组的表单。我的表单中有几个字段，我希望根据外部环境设置这些字段的启用/禁用。这适用于预期的输入域。
我在堆栈闪电战中做了一个简单的例子：
我做了什么，我有我的应用程序-Component.ts：
import { Component, VERSION } from "@angular/core";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
@Component({
selector: "my-app"
浏览 8提问于2021-03-11得票数 1
2回答
我正在尝试减少反应式表单验证中的代码。我有很多用于反应式表单验证的代码，所以我的页面正在加载slow.So，如何解决这个问题来提高速度。我不know.If任何人知道，请帮助找到解决方案。 this.registerForm = this.formBuilder.group({
firstName: [null],
lastName: [null]
});
浏览 16提问于2019-12-19得票数 1
1回答
我试图通过一个条件禁用复选框，但它没有被禁用。
我强行将该方法插入oninit中，并在console.log()中选中了表单，并且它有status: "DISABLE"，但复选框没有禁用，如果我在复选框中插入禁用的数据绑定，则会出现角度抱怨，说明我使用的是反应性表单，并且需要使用.disabled()方法。
合同表格组件
@Component({
selector: 'app-contract-form',
template: `
<app-form [class]="'flex__display
浏览 0提问于2020-06-26得票数 0
我想禁用页面加载中的所有控件，并在用户单击反应性窗体中的add按钮时启用所有控件。为此，我在html模板中使用了[disabled]属性，但是我在控制台中得到了下面的警告消息。
警告：
看起来，您使用的是带有反应性表单的禁用属性。如果在组件类中设置此控件时，将禁用属性设置为true，则禁用属性实际上将在DOM中为您设置。我们建议使用这种方法来避免“检查后更改”错误。
Example:
form = new FormGroup({
first: new FormControl(
{value: 'Nancy', disabled
浏览 2提问于2016-11-17得票数 1
1回答
因此，我有一个(Angular 10)反应式表单，其中有许多输入组件，每个组件都是在ngFor循环中动态创建的： <div [id]="this.getDivElementId()" class="textinput dynControl" [formGroup]="this.parentFormRef" >
<input [name]="this.controlData.name" [id]="this.controlData.name" type="text" [at
浏览 17提问于2021-03-23得票数 0
回答已采纳
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
如何在angular中检查ngmodel或表单是脏的或有输入使用表单域，但不使用formgroup。 我想检查是否有5个输入字段有值或脏，我想要像消息一样显示，但我们如何检查，例如，来自DealFields或ngModel dealDispositionFormFields的5个字段是否有值或有输入？谢谢你。 #tscode class DealDispositionFormFields {
dealName:string;
summary:string;
dealDispositionType: string;
termination
浏览 28提问于2021-10-01得票数 1
回答已采纳
1回答
在使用Reactive forms时，有没有办法禁用angular中的整个表单？我知道有可能让它们一个接一个地禁用。
this.tempForm = this.fb.group({
m26_type: '',
m26_name: ''
})
this.tempForm.get('m26_type').disable();
是否可以禁用整个窗体，而不是单独禁用每个控制器？
浏览 4提问于2017-08-24得票数 35
回答已采纳
2回答
无法禁用单选按钮
、、
我使用的是angular 11。我想禁用有条件的单选按钮，但它不工作。它始终启用满足条件的事件。我完全不知道如何解决这个问题。这是我的示例代码。
HTML
<div class="wizard mt-5">
<div class="wizard-inner">
<ul class="border-0 justify-content-between nav nav-tabs">
<div class="c
浏览 15提问于2021-04-20得票数 1
我有一个示例表单，如下：
stuff: IStuff;
buildForm() {
this.createForm = this.form.group({
Val1: [{ value: '', disabled: true }],
Val2: [{ value: '', disabled: true }]
});
如您所见，这两个值都被设置为disabled。
构造函数触发httpClient get并填充模型：
this.exampleHttpService.getStuf
浏览 1提问于2018-11-26得票数 1
回答已采纳
我有一个相当复杂的模型来管理一些数据状态。它有许多输入、选择、复选框和其他自定义组件。 现在我想向用户展示一些摘要提示，关于在打开模式的时间内更新了哪些数据，以及它将导致什么后果。例如，在一些操作中，我想要更改“更新”按钮的颜色，在一些操作中根本不显示它，而对于所有状态，我会显示所做更改的一些摘要(例如，在工具提示中)。重要的是，它不只是显示一些输入字段被触摸，而另一些则没有，它又是它们状态变化的某种组合。 问题是我根本不使用<form>标签，因为大多数定制组件都没有支持它的name属性。所以我不能写一个自定义的表单验证器，它的主要副作用是更新状态摘要变量(因为我需要更复杂的东西
浏览 8提问于2019-05-28得票数 0
2回答
我做了一个步进器，我想在select中输入一个默认值。为此，我使用了双向绑定[(value)]属性。而且它起作用了。
但是一旦我添加了一个[formControl]属性，输入值就消失了。它仍然在程序中，但不再出现在下拉列表中。
以下是步骤的示例：
<mat-step state="class" [stepControl]="firstFormControl">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fo
浏览 0提问于2021-02-26得票数 0
2回答
我希望设置我的访问表单，以便必须先完成Ref no.字段(这是强制性的)，然后才允许用户继续填写表单的其余部分。
默认情况下，游标被放置在Ref no字段中，但是在输入值之前，不能允许用户导航。
这就是我想要发生的：
用户打开表单
默认字段是Ref no，在此字段中，用户必须输入一个值，然后才允许移动到任何其他字段。
理想情况下，如果用户在输入任何内容(字段不能为空)之前从Ref no字段导航，表单将弹出错误消息。
这能办到吗？
浏览 3提问于2015-10-19得票数 1
1回答
我用的是反应式的日期选择器
该示例在模板驱动的form..am中使用了反应性形式。
是否有人使用反应性表单数据选择器..How来执行此操作？请让我知道我需要(只显示DD-MM)并将日期发送到服务器...thanks。
浏览 6提问于2020-11-29得票数 0
回答已采纳
我现在正在做一个Angular 6项目，我想知道反应式表单是不是用户安全的。我在想一个像这样的例子：
'durationControl': [{
value: this.duration,
disabled: !this.permissions.durationEnabled
}, [rangeValidator(1, 360), Validators.required]],
用户点击HTML中的元素，然后按下检查，然后从代码中删除“禁用”，这类代码是安全的吗？
我们已经尝试过了，它可以很容易地完成，我们可以操作应该禁用的字段的值。如果此元素
浏览 15提问于2018-07-25得票数 0
回答已采纳
我有一个反应式表单，其中我使用了表单数组和所有，但现在我只需要获取细节，并必须使其为只读。我也尝试过readonly="true“，但它不适用于select。所以有人能帮我解决这个问题吗？
浏览 1提问于2018-06-14得票数 0
1回答
我有一个表单，在表单中我有一个UltraExpandableGroupBoxPanel，它包含一些控件。例：
Me.UltraExpandableGroupBoxPanel.AutoScroll = True
Me.UltraExpandableGroupBoxPanel.Controls.Add(Me.ctlCars)
Me.UltraExpandableGroupBoxPanel.Controls.Add(Me.ctlPlanes)
Me.UltraExpandableGroupBoxPanel.Dock = System.Windows.Forms.DockStyle.Fill
Me.U
浏览 3提问于2016-11-23得票数 1
回答已采纳
1回答
在WinForms应用程序中，我在UserControl中有一组特定的按钮，我需要它们始终保持不变，即使当前显示的是模式表单。
我无法控制出现的模式表单(不能将ShowDialog更改为简单的显示)。我想知道是否有任何方法可以覆盖/抑制另一种形式的模态。
有没有办法做到这一点？
浏览 10提问于2020-05-04得票数 0
2回答
我有一个表单，其中获取用户的信用卡信息，所有这些都是由电子商务API验证。我在表单中还有其他字段，如姓名、地址。我能够验证姓名和地址，但由于信用卡信息的输入是由后端验证的。他们有没有办法让我禁用按钮，直到所有字段都填写完毕？
<div class="medium-6 columns" *ngIf="!isLoading else updateLoading">
<button class="saves" (click)="onSave()" aria-label="Save user info&
浏览 0提问于2019-09-06得票数 0
我正在尝试了解如何实现作为ControlValueAccessor接口一部分的setDisabledState函数，但我不知道如何从组件本身的外部实际触发该函数。 在组件中，我有 control = new FormControl();
setDisabledState(isDisabled: boolean): void {
this._renderer.setProperty(this.formField.nativeElement, 'disabled', isDisabled);
} 如果我在组件的NgOnInit中执行下面的操作，这将很好地设置我的禁用
浏览 72提问于2020-11-28得票数 2
我的要求是，New应该有所有字段都可以编辑，而editable应该只有少量只读字段(就像用户在新表单中为项输入的ID一样)。如何通过使用Infopath完成表单自定义来实现。
浏览 0提问于2013-12-09得票数 0
回答已采纳
我正在开发一个包含文本框、单选按钮、数据视图等控件的winform .所有这些控件都已添加到一个名为gbDataEntry的主组框中。
我的问题是当用户看到表单时，我设置了gbDataEntry.Enabled = False，但是我希望启用一些控件，比如DataGridviews，这样用户就可以滚动它们。禁用gbDataGridview后，我将DataGridView1设置为respond = True，但似乎datagridview对这一行没有响应。为什么？
有什么问题吗？
浏览 0提问于2011-02-10得票数 0
3回答
我在表单中的面板中有一些控件。我想禁用面板，但是面板中的一些控件需要保持启用。
是否有任何方法在禁用面板中启用某些控件？
我会很高兴有一些想法如何做到这一点。
浏览 4提问于2013-09-13得票数 0
回答已采纳
我有一个动态填充的反应式表单。
<form [formGroup]="productForm" (ngSubmit)="save();" novalidate>
<table>
<tr>
<td style="padding-right: 20px">Steps</td>
<td style="padding-right: 20px">Estimated Completion Date:
浏览 0提问于2017-07-19得票数 0
我有这段代码，它确实可以工作，但它会禁用表单上的所有内容，包括关闭按钮。无论如何，有没有办法修改它来禁用像textboxs之类的表单控件呢？我没有释放被认为是控制箱的控制箱？
public void DisableControls(Control con)
{
foreach (Control c in con.Controls)
{
DisableControls(c);
}
con.Enabled = false;
}
public void EnableControls(Contro
浏览 14提问于2018-01-06得票数 0
我有这个简单的表单，并在创建和更新案例中使用，因此对于create，用户将输入数据，并在validatorsI基础上获得form.valid (true，false)。在更新的情况下，我只是从api获取数据，并将此值设置为表单，并使表单禁用；
this.form = fb.group({
name: ['', Validators.required],
lastName: ['', Validators.required],
address: [''],
});
因此，当我禁用表单时，有效值总是false；
ngOnInit() {
浏览 0提问于2018-07-22得票数 12
回答已采纳
我正在尝试禁用我的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
我使用的是反应式表单。
我有一个提交按钮，在表单生效之前应该禁用该按钮：
<button type="submit" [disabled]="!_searchForm.valid && !_searchForm.pristine">Submit</button>
我的字段可以使用bools打开/关闭：
showName: boolean = true;
showPhone: boolean = true;
showCellphone: boolean = true;
下面是我的验证规则：
this._searchForm
浏览 0提问于2016-10-20得票数 1
我有一个formGroup，里面有一个提交按钮：
<form [formGroup]="myGroup" (ngSubmit)="submitForm()">
<input type="text" formControlName="name">
<button type="submit">Submit</button>
</form>
当我的组件初始化时，我调用这个函数来构建表单：
buildForm() {
this.myGroup =
浏览 0提问于2020-08-13得票数 0
我有一个表单，我可以在其中更新电子邮件和密码，因此我使用表单组创建了FormControl
this.user= new FormGroup({
Email: new FormControl("", [
Validators.required,
Validators.pattern("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$"),
Validators.maxLength(60)
浏览 0提问于2018-09-20得票数 0
1回答
我继承了一个ASP.NET web (.NET 2)项目，该项目广泛使用DetailsView和BoundFields来处理插入和更新数据。但是，对于失败的插入，它没有保留在表单上输入的任何数据，我也看不出如何实现它。我上一位同事使用的模式是：
打开默认为编辑Detailsview模式的edit.aspx?ID=123
如果ID为空而不是回发，则更改Detailsview模式以插入
完成表单并将onItemInserting连接到验证方法
在验证方法验证中，在错误时填充任何错误标签，并在发生错误时取消事件。
字段不是动态生成的。我试图通过更改绑定字段上的nullDisp
浏览 6提问于2014-09-23得票数 0
我相信这个问题以前已经被问过和回答过，但是我的Google-fu让我失望了。
我有一个表单，用户可以通过一个组合框选择一个记录，这是很好的。但是，当用户删除记录、刷新记录或打开窗体时，它会自动跳回我表中的第一条记录。理想情况下，我想让它显示一些类似于“请选择一个记录或创建一个新的记录”的内容，禁用所有其他字段。现在，一个潜在的解决方案实际上是将记录编号1命名为“请选择.”然后编写代码来禁用每个字段，但这似乎是一个不太理想的解决方案，因为手动灰化看起来有些不稳定。此外，也不能保证访问经验有限的未来管理员不会意外地删除第一条记录。所以，我的问题是：
( 1)是否有更好的解决办法？处理这个问题的好方
浏览 4提问于2012-09-10得票数 0
回答已采纳
我有一个使用JQuery 2.1.3和Spring 4.1.3的表单。表单上有一个复选框，这将导致Spring 。这是正常的、预期的Spring行为，但是，隐藏元素似乎并没有被传递回服务器。通过查看Chrome开发工具中的帖子，如果选中了复选框，我可以看到复选框值返回，如果未选中，则不会返回。无论哪种方式，我都看不到隐藏字段的价值。
我使用JQuery onclick()处理程序提交表单，并想知道这是否会以某种方式妨碍预期的行为，因为除此之外，我看不到任何问题。下面是代码：
JSP来源：
<form:input id="mycheckboxinput" path="
浏览 2提问于2015-12-02得票数 1
回答已采纳
我正在尝试在angular 7应用程序中使用pattern添加一些验证。如果模式有错误( phoneNumber.errors?.pattern )，我想使用变量this.isSubmitDisabled禁用一个按钮。
我知道这可以使用反应式表单来实现，但不幸的是，我不能使用表单。如果phoneNumber.errors?.pattern为true，是否可以将变量值设置为'true‘？
下面是我的代码：
<input
type="text"
class="form-control"
(ngModelChange)="dia
浏览 0提问于2019-12-24得票数 0
在Html5中，当用户提交表单时，如何重命名输入字段?我有一个文本字段，用户只能使用某个associted按钮修改它，所以我将其设置为禁用，这样他们就不能手动修改它。但是，因为在用户提交表单时禁用了它，所以我的服务器没有收到请求中字段的值。那么，我如何使它启用，就像提交按钮按下，或有另一种方法，我应该采取。
浏览 1提问于2018-01-17得票数 0
回答已采纳
在angular中有没有办法检查表单控件是否被禁用？ this.form.get("nationality").disable() 已禁用此控件。 是否可以检查此控件在重置方法时是否被禁用。如果禁用，则不需要重置该值。 我怎么才能检查它。 onReset(){
if(this.form.get("nationality").isDisable()){// its wrong
let name =this.form.get("nationality").value;
}else{
let name = null;
}
this.form.re
浏览 16提问于2020-09-09得票数 2
假设我有这样的表单结构：
this.entryForm = this.formBuilder.group({
date: [{value:'' , disabled: true}, [Validators.required]],
notes: [''],
sum_credit: [{value:'', disabled: true }],
sum_debit: [{value:'', disabled: true}],
浏览 9提问于2018-07-29得票数 8
回答已采纳
1回答
我希望在从Angular material的步进器中使用mat-select显示默认值。 编辑不能将formControlName与双向绑定一起使用。在声明表单组时，我最终初始化了组件中的值 <mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup"&
浏览 15提问于2020-04-14得票数 0
回答已采纳
当onclick填充表单字段值时，我有一个要求。 我面临着两个表单域的问题。这两个字段有ngIf检查来隐藏和显示。Hide and show运行得很好。 但是，该表单域的formcontrol值并不像其他字段那样填充。 <mat-form-field appearance="outline" fxFlex="50" class="pr-12" style="width:30%" *ngIf="frmStockReceive.supplierType ==='Supplier'">
浏览 23提问于2020-04-25得票数 0
2回答
我使用ExpressionEngine和SafeCracker以及Ajax (插件: jquery.form.js - )。
据我所知，SafeCracker一次只允许更新一个条目。但是，UI / UX需要显示一个列表。我已经做了一个按需输入表单的概念证明。也就是说，单击每个条目旁边的特定编辑链接，jquery片段就会创建一个表单，并显示一个提交按钮。单击submit，该单个条目将更新。单击更新链接后，输入才会存在
如果可能的话，我更喜欢做的是在页面重新创建时创建每个条目的非表单和表单版本，并使用某种切换来显示其中之一。再说一次，可行。然后，当我单击Edit链接时，我会向输入添加必要的属性，这
浏览 3提问于2012-05-27得票数 6
回答已采纳
2回答
我在我的应用程序中创建了一个表单。 mapForm = this.fb.group({
name: ['', Validators.required],
view: this.fb.group({
width: ['', Validators.required],
height: ['', Validators.required]
})
}); 在这个表单中，我创建了一个JSON，如下所示： {
name: "x",
view:{
w
浏览 14提问于2020-01-06得票数 2
我已经在angular中创建了一个反应式表单。我可以在控件的触摸上获得验证，但不能通过单击submit按钮在提交表单时进行验证。我的代码如下： <form [formGroup]="myform" (ngSubmit)="SubmitDetails()">
<div class="row">
<label for="name">Name:</label>
<input type="text" id="Name" name=
浏览 21提问于2020-01-23得票数 0
我有这样的提交表格。
<form method="post" id="formCard" name="formCard">
<input type="radio" name="name[]" value="0">
<input type="radio" name="name[]" value="1">
<input type="radio" name="name[]" value
浏览 1提问于2022-10-06得票数 0
在PowerShell中是否有一种方法允许在窗体元素(例如，在按钮上)悬停时隐藏鼠标光标？甚至将光标隐藏在整个窗体上。重要的是，此时鼠标光标不应该是活动的。(解释。也就是说，当光标被隐藏时，他不会点击表单上的按钮。也就是说，窗体上完全没有游标。)
就像这样：
$Button.CursorVisible = $False
我在C# (这里的代码)中找到了一个解决方案，但我不知道PowerShell中的类似物。谢谢
浏览 2提问于2020-01-05得票数 1
回答已采纳
6回答
我继承了一个Winforms应用程序，该应用程序从UI线程对应用程序服务器执行了大量长时间的调用，因此UI在相当长的一段时间内都没有响应性、不可用性和不可关闭性。(这让我非常喜欢AAAAAAAAARGH!)
我计划将服务器调用移动到后台线程，并禁用UI (但可移动和关闭)，而后台线程则完成其工作。
那么，抑制用户输入到我的应用程序的最好方法是什么呢？我正在按照“模态进度对话框”的思路思考，但我更喜欢一种解决方案，它不会强迫我向用户抛出视觉效果(一些服务器操作在不到500 is内运行，因此对话框不是最佳的.)
在Winforms中是否有任何方法可以防止用户在应用程序中启动操作或更改数据，同时让用
浏览 3提问于2009-03-15得票数 11
回答已采纳
我想从类库中禁用表单控件，这意味着我添加了一个名为clsInit method的类&我在主项目中加载表单时调用了该方法，因此我需要找到要禁用的控件。
是否可以在类库中找到已加载的窗体控件？
浏览 2提问于2013-04-02得票数 0
回答已采纳
我在Angular中实现了一个反应式表单，如果表单组的一个控件无效，我会在原生元素中滚动(但访问原生元素还有很多其他原因，这只是其中之一)。 我期望得到这样的API： for (const key in this.formGroup) {
const control = this.formGroup[key];
if (!control.valid) {
control.nativeElement.scrollIntoView();
}
} 但是，太糟糕了，它不存在任何像FormControl.prototype.nativeElement这样的属性。 考虑到表单很大并且
浏览 18提问于2019-05-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
