与Angular模板或反应形式相关的问题。
使用 Angular 4 实现了注册表单。当字段为空时，使用警报危险来验证输入表单。 请建议如何验证这些输入表单字段，例如。用户名，密码...
Angular - ValueChanges 不更新父表单（ControlValueAccessor）
我有以下代码 https://stackblitz.com/edit/angular-control-value-accessor-form-subscribed-val-egkreh?file=src/app/app.component.html 我已经为表单字段传递了默认值，但是
从 Angular 10 迁移到 Angular 15 导致控制台出现以下错误： 错误错误：找不到路径的控件：'mappedHeaders -> 0 -> 价值' 示例.ts this.headerAr...
我有一个像这样的父组件。 我有一个像这样的父组件。 <form [formGroup]="validateFormGroup"> <div> <mat-form-field> <input matInput placeholder="Name" maxlength="150" formControlName="name" required> </mat-form-field> </div> </form> <div class=""> <app-calendar-time-zones (getSelectedTimeZone)="setTimeZoneSelected($event)" ></app-calendar-time-zones> </div> 在 app-calendar-time-zones 组件中，这是我的 HTML 代码 <div class="calendar-container"> <mat-form-field> <mat-label>Select time zone</mat-label> <mat-select [(ngModel)]='selectedTimeZone.displayName' class='form-control' > <mat-option *ngFor="let timezone of filteredTimeZones | timezonesFilter : searchValue" [value]="timezone.id" (click)="timeZoneSelected(timezone)"> {{timezone.offset + ' ' + timezone.displayName}} </mat-option> </mat-select> </mat-form-field> </div> 在子组件 Ts 文件中，我正在设置这样的值，但其垫选择元素未设置为所选值。 this.selectedTimeZone = this.filteredTimeZones[0]; // selectedTimeZone i am getting here is this == {id: "Africa/Abidjan", displayName: "Greenwich Mean Time", useDaylightTime: false, rawOffset: 0, offset: ""} 显示以下空下拉列表。但是，如果我单击下拉图标，我就可以看到所有选项。 and in the browser if i inspect mat-select element. ngModel value is setting . 要自动选择，通过 ngModel 传递的值必须与选项的 value 匹配。 所以，我猜 selectedTimeZone.displayName 与绑定到您的选项的任何 timezone.id 都不匹配。 这对我有用 <mat-form-field> <mat-label for="">Doctor Name</mat-label> <mat-select [(ngModel)]="patientInfo.doctorName"> <mat-option value="" selected></mat-option> @for (doctor of doctorsList(); track doctor) { <mat-option [value]="doctor.name">{{ doctor.name }}</mat-option> } </mat-select> </mat-form-field>
我正在使用一个有 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">
@for 在removeAt(index) 上的表单表现得很奇怪
编辑：稍微改进了 stackblitz，以便人们可以并排比较它。 在 Angular 17+ 中，我想使用新的模板语法来迁移我的项目，这似乎有一个奇怪的行为......
我面临一个问题，我想过滤 formArray 控件 公共checklistForm！：FormGroup； this.checklistForm = this.fb.group({ checklistItems: this.fb.array([]) }); // 一些逻辑 公开
我想执行表单验证。如果该字段是“脏”的。 如果密码字段中没有任何内容，则应显示错误。 如果密码不匹配，也会出现错误
下面是我从服务获取响应的代码。在这里，我得到了一份员工名单。 我需要根据服务的响应动态绑定表单控件。不过，我的服务是回报...
RegEx 在生产版本中未正确验证，不接受 0、2、7、a、c、u、x，有时还接受 z
我正在使用 Angular 15.2.10 和 Typescript 4.9.5。 我的一个库中提供了以下正则表达式，并通过服务公开： 私有只读 _DISALLOWED_CHARS_REGEX_GENERAL = 新注册...
有没有办法找出 Angular FormControl 是否有验证器及其值？ 例如如果我有这样的表单控件设置： testControl: new FormControl(null, [Validators.required, Validators.
我正在开发一个 Angular 表单，用户可以在其中输入他们的电话号码。我添加了一个自定义指令 appPhoneExtMask 用于电话号码格式设置，并应用了最小长度的 Angular 表单验证...
我有这个FormGroup： 这个.fb.group({ a: ["", Validators.required], b: ["", Validators.required], c: [{值: "", 禁用: true}, Validators.required] });...
目前我正在 Angular 17 中试验模板驱动表单，我有对象接口 接口测试2 = { 名称：字符串 } 接口测试={ 名称：字符串， 其他？ : 特...
我正在更新一些遗留表单，使其类型更加强健，从而修复 eslint 错误。我不断遇到这样的问题：抽象控件上的 .value 运算符会引发 IDE 错误“Un...
我正在构建一个 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]); }); }
我正在使用 PrimeNG 开发 Angular 项目，并且在尝试禁用文本表单编辑到字段时发现以下困难。 基本上进入我的组件的 HTML 代码...
我正在尝试显示 Angular for 的验证错误消息。我有三个复选框。如果我没有选择任何人，我想显示错误消息。如何在角度的反应式表单验证中做到这一点。 德...
做了一个基本的例子来展示我想要完成的任务： 基本上给出了这两种类型： 类型 BaseType = FormGroup<{ user: FormControl; }>; 输入 SomeOtherType = FormGroup...
我在操作中将表单控件标记为已触摸和脏，并且更改未反映在 UI 上。 我正在使用 ngxtension 库中的 signalSlice： https://ngxtension.netlify.app/