我正在将 Angular Material 与 Angular 7 一起使用。我有许多反应形式，每个形式都有自己的控制，并且每个形式都更新正在编辑的主要对象的不同属性集合。这些控件各自托管在 Angular Material Stepper 控件的不同步骤中。
每个控件都有一个名为“添加新”的按钮，允许用户向集合中添加新对象，以及一个“编辑”按钮，用于编辑集合中的任何现有项目。每当单击“添加新项”按钮时，我都会创建一个具有默认值（最空）的新项，并将其绑定到控件中的反应式表单。
表单始终允许用户单击“添加到集合”按钮（即，该按钮永远不会被禁用），并且验证错误（如果有）会在此时向用户显示。（如果存在验证错误，则该项目不会添加到集合中。）
一切工作正常，直到我转到步进器控件的另一步骤，然后返回我正在处理的步骤。发生这种情况时，我单击“添加新项”按钮，即使用户没有单击“添加到集合”按钮，我也会立即看到所有必需的验证错误。当我查看控件的值时，我没有看到任何应该显示验证错误的原因，但它们确实如此（空输入周围的红色突出显示）。
这是每当用户单击“添加新”时我运行的代码：
public resetForm(formGroup: FormGroup) {
if (!formGroup)
return;
formGroup.reset();
formGroup.clearValidators();
// see /sf/ask/3375143131/
Object.keys(formGroup.controls).forEach(key => {
if (ignoreControls.indexOf(key) == -1) {
formGroup.get(key).setErrors(null);
formGroup.get(key).markAsPristine();
formGroup.get(key).markAsUntouched();
formGroup.get(key).clearValidators();
formGroup.get(key).updateValueAndValidity();
}
});
当我在 html 中查看单个控件时，我看到了我期望看到的所有内容：
<input _ngcontent-wyd-c14="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-untouched ng-pristine ng-invalid" formcontrolname="title" matinput="" placeholder="e.g. Customer Service Representative" required="" type="text" ng-reflect-required="" ng-reflect-name="title" ng-reflect-placeholder="e.g. Customer Service Represen" ng-reflect-type="text" id="mat-input-24" aria-invalid="true" aria-required="true">
请注意，该类包含 ng-untouched 和 ng-pristine （以及 ng-invalid）。如果字段是原始且未受影响的，则它不应该显示验证错误。
我怀疑的是，更改为 Stepper 控件上的不同步骤会导致某种形式的表单提交或提交尝试，这就是为什么显示所有错误（form.subscribed …
我正在使用aspnetcore-spa模板,使用命令"dotnet new angular"创建一个项目.请参阅https://jonhilton.net/2017/02/21/create-a-vs2017-angular-2-and-net-core-site-using-the-command-line/.当前的模板集是版本1.0.3,它将Angular 4.1.2添加到npm依赖项中.这很适合让项目快速运行.
但是,开箱即用,"计数器"页面不适用于IE 11.如果您导航到"计数器"链接,并查看IE的控制台,您将看到消息:"无法获取属性'应用'未定义或空引用".当您单击"增量"按钮时,没有任何反应.(它适用于Chrome和Firefox,但不适用于IE.)
我做了一些挖掘,似乎问题的根源是IE11中没有实现.assign方法.请参阅Angular2 IE11无法获取未定义或空引用的属性"apply"
根据上面的链接,修复是通过MDN导入Object.assign polyfill.但是,我不知道如何在项目中实现这一目标.我试过的是:
1)添加到package.json:"mdn-polyfills":"^ 3.5.0"
2)将"mdn-polyfills"添加到webpack.config.vendors.js
3)从项目文件夹根目录下的命令提示符运行"webpack --config webpack.config.vendor.js",这会导致错误:
Module not found: Error: Can't resolve 'mdn-polyfills'
我不知道接下来该做什么.上面的步骤1和2不能解决问题.我尝试添加到app.module.shared.ts以下内容:
import 'mdn-polyfills/Object.assign';
这编译好,但没有任何帮助.当然,我不打算使用计数器页面,但是我在我实际关注的组件中创建的表单上得到了相同的错误(仅在IE 11中).
所以,再一次,我不得不努力设置一个有效的环境,而不是实际编写Angular组件.哦,我多么想念可以通过NuGet添加包的日子,它会起作用!
如果有人可以提供帮助,我们将不胜感激.
更新:找到后:https://www.npmjs.com/package/es6-object-assign,我将"es6-object-assign":"1.1.0"添加到package.json,然后添加'es6-object -assign'到webpack.config.vendors.js,然后从命令提示符运行webpack --config webpack.config.vendor.js(没有错误).然后我在app.component.ts的顶部添加了以下内容文件:
import 'es6-shim';
import 'es6-promise';
import 'event-source-polyfill';
import 'es6-object-assign';
它没有任何区别.我仍然得到"无法获取属性'应用'未定义或空引用"错误.我还注意到,每个页面上都会出现此错误,但它似乎只会影响计数器页面的功能("增量"按钮不起作用).
我已经证实问题的根源确实是.assign方法.该错误来自vendor.js文件,位于以下返回行:
function combine(options) {
return ((Object)).assign.apply(((Object)), [{}].concat(options));
}
必须有办法解决这个问题,但我不知所措......
新的更新:我相信这不是解决这个问题的正确方法,但是我绝望地在我的_Layout.cshtml页面的顶部添加了一个脚本,我在这里找到了:https://developer.mozilla.org/EN-US /文档/网络/的JavaScript /参考/ Global_Objects /对象/分配
这确实解决了问题,并使计数器页面正常工作,但它显然不是"Angular方式",所以我不认为这个解决方案是我的问题的答案.如果有人能告诉我解决这个问题的正确方法,我会考虑答案.
我有一个适合移动设备的 Web 应用程序，我希望用户能够通过电子邮件或文本中发送的链接进行访问。该链接将包含特定于该用户的查询字符串参数，该参数控制网站显示的内容。该链接可能如下所示：
https://corpsite/myapplication/?show=578
当用户使用 safari 访问此 URL 时，该网站会抓取一些对于“show=578”参数正确的信息，一切都很好。（这里安全性不是一个因素。）但是，使用我正在测试的 iPhone 8 的“添加到主屏幕”功能将应用程序安装到主屏幕后，单击主屏幕图标时打开的 URL 是：
https://corpsite/myapplication/
查询字符串信息不会被保留！（我最终编写了一些调试代码，在应用程序加载时告诉我完整的 URL。当我单击电子邮件中的链接并在 Safari 中转到那里时，报告的 URL 包含查询字符串。但是当我将该页面保存到主页时屏幕并稍后单击主屏幕图标，报告的 URL 不包含任何查询字符串信息。）
我已将其添加到（Angular 5）应用程序的index.html页面中，我认为这就是我需要做的全部（除了一些与图标相关的标签之外）：
<meta name="apple-mobile-web-app-capable" content="yes">
如何通过主屏幕图标实现此功能？