angular-forms 相关问题

与Angular模板或反应形式相关的问题。

我正在使用一个有 2 个元素的组件。在其中一个中，我注入了这样的表格：在另一个中，我有一些按钮，我想在其上使用 form.valid 和 form。我正在使用一个有 2 个元素的组件。在其中一个中，我注入了这样的表格： <form #form="ngForm"> 在另一个中，我想在其上使用 form.valid 和 form.pristine 的按钮，如下所示： <button [disabled]="!form.valid || form.pristine"> 这不起作用，因为按钮位于表单本身之外并且位于单独的 ng-content 元素中（该部分可能不相关）。我尝试过使用： @ViewChild('form') form!: ngForm 不幸的是，这最终是未定义的。谢谢！你是在正确的轨道上，我们可以只创建一个视图子级，但该值只会在ngAfterViewInit上设置，因此我们可以将对视图子级的引用存储在服务变量上，然后使用该变量来查找值在我们不相关的组件上创建服务： export class SomeService { refForm!: Form; } 表单所在组件中 @ViewChild('form', {static: false}) form!: ngForm; ... ... constructor(private someService: SomeService) {} ... ... ngAfterViewInit() { this.someService.refForm = this.form; } ... 最后，在您投影按钮内容的组件中在 TS 文件中添加 getter 方法，该方法将转发表单以进行检查 ... ... constructor(private someService: SomeService) {} ... ... get form() { return this.someService.refForm; } 组件 html（确保添加安全检查?.，这样如果表单未定义，就不会出现错误！） <button [disabled]="!form?.valid || form?.pristine">

angular angular-forms angular-content-projection

回答 1 投票 0

@for 在removeAt(index) 上的表单表现得很奇怪

编辑：稍微改进了 stackblitz，以便人们可以并排比较它。在 Angular 17+ 中，我想使用新的模板语法来迁移我的项目，这似乎有一个奇怪的行为......

angular angular-reactive-forms angular-forms

回答 1 投票 0

角度过滤器表单基于某些条件的数组控件

我面临一个问题，我想过滤 formArray 控件公共checklistForm！：FormGroup； this.checklistForm = this.fb.group({ checklistItems: this.fb.array([]) }); // 一些逻辑公开

angular typescript angular-forms

回答 1 投票 0

Angular 表单验证：显示空密码和不匹配密码的错误

我想执行表单验证。如果该字段是“脏”的。如果密码字段中没有任何内容，则应显示错误。如果密码不匹配，也会出现错误

angular angular-material angular-forms

回答 1 投票 0

如何检查表单中是否存在控件

下面是我从服务获取响应的代码。在这里，我得到了一份员工名单。我需要根据服务的响应动态绑定表单控件。不过，我的服务是回报...

angular angular6 angular-forms angular-formbuilder

回答 3 投票 0

RegEx 在生产版本中未正确验证，不接受 0、2、7、a、c、u、x，有时还接受 z

我正在使用 Angular 15.2.10 和 Typescript 4.9.5。我的一个库中提供了以下正则表达式，并通过服务公开：私有只读 _DISALLOWED_CHARS_REGEX_GENERAL = 新注册...

angular regex typescript angular-forms

回答 1 投票 0

从 Angular FormControl 获取验证器和值

有没有办法找出 Angular FormControl 是否有验证器及其值？例如如果我有这样的表单控件设置： testControl: new FormControl(null, [Validators.required, Validators.

angular angular-forms angular-validation angular-validator

回答 1 投票 0

如果用户仅在输入字段中输入空格，则会触发验证错误

我正在开发一个 Angular 表单，用户可以在其中输入他们的电话号码。我添加了一个自定义指令 appPhoneExtMask 用于电话号码格式设置，并应用了最小长度的 Angular 表单验证...

angular typescript validation angular-forms

回答 1 投票 0

我必须禁用 FormControl 但保留验证

我有这个FormGroup：这个.fb.group({ a: ["", Validators.required], b: ["", Validators.required], c: [{值: "", 禁用: true}, Validators.required] });...

angular angular-forms form-control angular-validation disabled-control

回答 1 投票 0

ngModel 在空对象上创建对象属性

目前我正在 Angular 17 中试验模板驱动表单，我有对象接口接口测试2 = { 名称：字符串 } 接口测试={ 名称：字符串，其他？ : 特...

angular typescript angular-forms

回答 1 投票 0

角度类型控件看不到类型

我正在更新一些遗留表单，使其类型更加强健，从而修复 eslint 错误。我不断遇到这样的问题：抽象控件上的 .value 运算符会引发 IDE 错误“Un...

angular typescript angular-material eslint angular-forms

回答 1 投票 0

更改 Angular formGroup 控件的顺序

我正在构建一个 Angular 应用程序，它通过 formgroup 对象动态呈现表单，如下所示：我正在构建一个 Angular 应用程序，它通过 formgroup object 动态呈现表单，如下所示： <div *ngFor="let controlName of updateValuesForm.controls | keys"> <input [formControlName]=controlName type="text" class="edit-template-input" /> </div> 但是在某些情况下，我想在我的 formgroup 对象中交换这些控件中两个的顺序。 Angular formgroup object 可以吗？一般来说，Javascript 中的对象没有顺序，而且对它们来说没有顺序。您可以使用 FormArray，它内部有一个数组来保存控件并以这种方式更改顺序。或者，如果您真的想用对象来完成此操作，您可能必须将控件存储在数组中并以这种方式更改顺序。 A FormGroup 内部是一个对象，因此没有固有的顺序。如果您将控件放在 FormArray 中，您将能够使用控件的索引更改控件的顺序。您可以使用 insert removeAt 和 push 等方法通过数组索引相应地操作 FormArray 中控件的顺序。我用了一个不太聪明但有效的方法，把底线放在名字和你想要的顺序的上面 this.formBuilder.group({ A : ...., B : ... }) 更改为 this.formBuilder.group({ _1_A : ...., _2_B : ... }) FormGroup的控件可以按所需顺序复制。原订单： this.form.controls = { A: ..., Z: ..., B: ... } 所需订单： this.form.controls = { A: this.form.controls.A, B: this.form.controls.B, Z: this.form.controls.Z } 在 chrome、firefox 和 safari 中进行了测试。 6 年后，formGroup.controls 的顺序是相关的，因为“高性能反序列化”需要像 $type 这样的元数据字段位于序列化 json 的顶部。但是 value 返回 formGroup.controls 的顺序。因此，要对控件进行排序并将所有元数据字段（以 $ 开头）放在顶部，您可以执行以下操作： import { FormGroup } from '@angular/forms'; export function sortFormGroupControls(formGroup: FormGroup): void { const controls = { ...formGroup.controls }; const sortedKeys = Object.keys(controls).sort((a, b) => { return a.localeCompare(b); }); Object.keys(controls).forEach(key => { formGroup.removeControl(key); }); sortedKeys.forEach(key => { formGroup.addControl(key, controls[key]); }); }

angular angular-forms

回答 5 投票 0

为什么我无法阻止用户编辑 PrimeNG 表单字段值？

我正在使用 PrimeNG 开发 Angular 项目，并且在尝试禁用文本表单编辑到字段时发现以下困难。基本上进入我的组件的 HTML 代码...

angular primeng angular-reactive-forms angular-forms

回答 3 投票 0

如何以角度形式显示验证错误消息

我正在尝试显示 Angular for 的验证错误消息。我有三个复选框。如果我没有选择任何人，我想显示错误消息。如何在角度的反应式表单验证中做到这一点。德...

angular typescript angular-forms angular15

回答 2 投票 0

角度类型表单无法分配给部分类型

做了一个基本的例子来展示我想要完成的任务：基本上给出了这两种类型：类型 BaseType = FormGroup<{ user: FormControl; }>; 输入 SomeOtherType = FormGroup...