- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个包含不同输入字段的表单,包括 input[type="file"] 和 input[type="checkbox"]。我通过后端的 get 请求获取输入表单字段的值,并将它们存储在公司变量中。
ngOnInit(): void {
this.generateForm();
this.companyService.getCompany().subscribe((response: Company) => {
this.company = response;
this.settingsForm.setValue({
...this.company,
certificateUrl: [this.company.certificateUrl],
});
});
}
我首先生成表单,然后从 get 请求获取响应,这样我就可以将我的公司变量设置为响应,并根据我得到的值设置表单的值。问题是我想在表单有效和更改时启用 html 中的按钮。因此,当未根据先前值进行任何更改时,应禁用按钮。例如:如果我们的字段名称值为“myName”,并且我在输入中键入“my”按钮,则应启用该按钮,因为与之前的值相比发生了更改。如果我输入回“myName”,它应该被禁用,因为值与之前的值相同。如果字段为空并且用户输入某些内容并且对于字段类型文件和复选框,也会发生同样的情况。
这就是我目前正在尝试的方法。
inputChanged: boolean = false
ngOnInit() {
this.settingsForm.valueChanges.subscribe((currentValue) => {
if (JSON.stringify(currentValue) !== JSON.stringify(this.company)) {
this.inputChanged = true;
} else {
this.inputChanged = false;
}
});
}
////
<button
[disabled]="!inputChanged || !settingsForm.valid"
class="btn btn-md text-light"
>
Save
</button>
这是我的表格
<form class="mt-4" [formGroup]="settingsForm" (ngSubmit)="saveChanges()">
<div class="row">
<div class="col-6">
<div class="form-group">
<label class="form-label fw-bold">ID</label>
<input
formControlName="identificationNumber"
type="text"
class="form-control"
/>
</div>
<div class="form-group d-none">
<label class="form-label fw-bold">Id</label>
<input formControlName="id" type="text" class="form-control" />
</div>
<div class="form-group d-none">
<label class="form-label fw-bold">Country</label>
<input formControlName="country" type="text" class="form-control" />
</div>
<div class="form-group">
<label class="form-label fw-bold"
>P</label
>
<input formControlName="tin" type="text" class="form-control" />
</div>
<div class="form-group">
<label class="form-label fw-bold">Name</label>
<input formControlName="name" type="text" class="form-control" />
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="form-label fw-bold">City</label>
<input formControlName="city" type="text" class="form-control" />
</div>
<div class="form-group">
<label class="form-label fw-bold">Address</label>
<input formControlName="address" type="text" class="form-control" />
</div>
<div class="form-group">
<label class="form-label fw-bold">Postal code</label>
<input
formControlName="postalCode"
type="text"
class="form-control"
/>
</div>
<div class="form-check ms-1">
<label class="form-check-label fw-bold">Vat</label>
<input
formControlName="inVat"
type="checkbox"
class="form-check-input"
[checked]="company?.inVat"
/>
</div>
</div>
</div>
<div class="row align-items-end justify-content-between">
<div class="col-8">
<app-file-upload
[company]="company"
formControlName="certificateUrl"
></app-file-upload>
</div>
<div class="col-4">
<button
[disabled]="!inputChanged || !settingsForm.valid"
class="btn btn-md text-light"
>
Save changes
</button>
</div>
</div>
</form>
但是这不起作用。我该如何解决这个问题?
最佳答案
您可以使用other响应式(Reactive)表单属性
使用pristine
为例
A control is pristine if the user has not yet changed the value in the UI.
<button
[disabled]="settingsForm.pristine || settingsForm.invalid"
class="btn btn-md text-light"
>Save</button>
如果您需要更具体的控制值,它会变得更加棘手,如 comparing Javascript objects并不是那么微不足道。
这个question是一次很棒的深入研究
关于angular - 根据 Angular 值的变化禁用/启用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71585757/
我想知道如何首先检测 Javascript 是否启用/禁用。在此站点上禁用 javascript 表明 stackoverflow 使用了称为标签的东西。 这是标准的做法吗?它适用于所有浏览器吗?它不
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: How to enable PHP short tags ? Enable short open tags
在 VSTS (Azure DevOps) 上拥有私有(private)存储库我尝试通过将以下内容添加到 .csproj 文件来启用 SourceLink:https://github.com/dot
我创建了一个 wx.Frame(我们称之为 mainFrame)。该框架上包含一个按钮,当单击该按钮时,会创建一个新框架(我们称之为 childFrame)。 我想知道如何在创建 childFrame
当我禁用 WPF 中的控件时,比如说一个菜单项 MenuItem aMenuItem = ... aMenuItem.IsEnabled = false; MenuItem 中的文本仍然处于事件状态,
我想在我的 nginx 服务器上启用 gzip 压缩。 nginx.conf 文件在这里: http { # Enable Gzip server { location ~* \.(?
我正在使用免费的 heroku 附加 PG 备份并遵循这些 instructions .我找到了安装应用程序的命令:heroku addons:add pgbackups:auto-week。但是我想
我想知道脚本是否可以使用某种切换按钮启用/禁用页面上的所有输入元素。 我用谷歌搜索了它,但除了这个之外没有发现任何有用的东西: http://www.codetoad.com/javascript/e
在我的 php 文件中,我想使用 jQuery Datepicker。 当我的文件加载时,我创建了禁用的日期选择器。 然后,当我的 php 文件(它是一个表单)中的一个特殊字段被填充时,我想启用日期选
我有一个按钮,如下所示: RadButton lnkAdd = new RadButton(); lnkAdd.ID = "BtnAdd"; lnkAdd.CommandName = RadGrid.
public static void ToggleTaskManager(string keyValue) { RegistryKey objRegistryK
我正在 Azure 中使用事件网格订阅,该订阅在创建 Blob 时触发。然而,我们有很多文件进入这个 blob,比如说 1000 多个。 如果我发现任何文件有任何错误,我想做的是禁用事件订阅。 最佳答
我的网站上有几个使用 HTML5 contentEditable 属性的 div。目标是让用户能够开始编写日记条目,并将保存按钮从禁用更改为启用。 这是我目前拥有的 HTML: Write
我有一个范围输入,其定义如下: @Html.LabelFor(m => Model.Quality, Resources.CompressionQuality) 和一个下拉菜单: @Html.Lab
我正在尝试创建一个启用/禁用按钮的下拉菜单,并且我正在关注此 example 但它已经有 4 年历史了,而且该功能似乎无法在我的 xhtml 页面上运行。 任何帮助都将被适当 最佳答案 这是一个现场演
我正在 Azure 中使用事件网格订阅,该订阅在创建 Blob 时触发。然而,我们有很多文件进入这个 blob,比如说 1000 多个。 如果我发现任何文件有任何错误,我想做的是禁用事件订阅。 最佳答
我在这里遇到一个非常奇怪的情况:我编写了一个应用程序,除其他外,将连接的代理从打开切换到关闭,反之亦然。通过更改注册表中的值来完成此操作: public void SetUpProxy(string
我需要调整一堆 PVC 的大小。似乎最简单的方法是通过ExpandPersistentVolumes 功能。但是我无法获得配置合作。 ExpandPersistentVolumes feature g
如果我的TextField为空,则应禁用该按钮,并且该按钮的textColor和borderColor应该为灰色。但是,启用按钮后,颜色应为蓝色。 更改textColor很容易: button.Set
您好,我的问题是:我无法从另一个类启用表单的按钮。我的表单类是 public class FileSending { //Function for enabling the button
我是一名优秀的程序员,十分优秀!