angular-reactive-forms 相关问题

为 Angular Reactive Forms 交叉属性验证器声明正确的类型？

在本教程中，作者实现了一个密码检查验证器，如下所示： MatchPassword(密码: 字符串, 确认密码: 字符串) { 返回（表单组：表单组）=> { 常量

异步验证器反应形式

payerGeneralInformationValidators = this.formBuilder.group({ 'payerName': ['', [Validators.required, Validators.pattern('[a-zA-Z 0-9`~!@#$%^&,.\'\"*()_+-]* $'), Validators.maxLength...

以编程方式设置用作单选按钮的按钮的值

我正在尝试通过代码设置用作单选按钮的按钮的值。我正在使用反应形式。 我尝试在 ngInit 上设置按钮的初始值 ngOnInit() { this.form = this.fb.g...

如何从类创建映射以提取其属性作为值？

我想在 Angular 模板和 FormGroup 之间创建更强大的类型安全链接。我想到了以下内容，但我不知道如何在 TypeScript 中正确表达它。 我想使用

使用反应式形式运行测试时出错

我有以下代码，并对它进行了一些测试。当我模拟 ts 测试的表单时，它运行良好。当我模拟 html 的相同表单时，最终出现以下错误： 表单没有值访问器

通过 *ngFor

我最近一直在做一个具有巨大表单的项目，并且遇到了性能问题。经过一番研究后，我想知道从反应式表单中选择嵌套 FormArrays 的更好方法是什么......

Angular 中表单无效时提交有效

当除国家/地区以外的所有字段都缺失时，提交按钮不会提交表单，而这是预期的功能。当我选择一个国家/地区但将其他字段留空时，表单将提交....

角反应形式中的打字错误

我从书上得到了这个代码，但是，在原始代码中，他在OnInit()方法中初始化了formgroup。 这就是为什么不存在以下错误的原因。然而，我认为这是错误的，因为...

在 formArray 中带有嵌套 formGroup 的 Angular Reactive Forms

我正在构建一个具有以下结构的表单： { “名称”：“根测试名称”， “定义”： { “名称”：“定义_测试_名称”， “组成...

在 Angular 中从 firebase 获取单个数据

我想通过 id 从 firebase 获取数据并填充更新表单。因此，首先要获取 id ，我有以下内容，但它将所有 id 作为数组返回。我如何在点击后只获得一个...

我无法在输入类型上动态分配值：radio / Angular

我很迷失，我正在尝试根据网址动态构建表单的模板，但由于某种原因我无法在单选类型输入上设置属性值。 表单蛋糕 html 我很迷失，我正在尝试根据网址动态构建表单的模板，但由于某种原因我无法在单选类型输入上设置属性值。 form-cake html <form [formGroup]="formCake" (ngSubmit)="onSubmit()"> <ng-container *ngFor="let template of formTemplate"> <label for="{{template.id}}">{{template.label}}: </label> <input id="{{template.id}}" type="{{template.type}}" [name]="template.name" [formControlName]="template.name" [attr.value]="(template.type === 'radio') ? template.value: null"> </ng-container> 形成蛋糕组件 ngOnInit(): void { this.formCake = this.formService.formControllerSetup(); this.formTemplate = this.formService.formHtmlSetup(); 表单服务 formControllerSetup(): FormGroup { return this.fb.group({ name: ['', Validators.required], description: ['', [Validators.required]], image: ['', Validators.required], price: [+'', Validators.required], cakeType: [null, Validators.required], allergies: this.fb.group({ cereal: [false], nuts: [false], eggs: [false], milk: [false], soy: [false], peanuts: [false], sulfite: [false], // ... Ajoute d'autres allergies ici }) }); } formHtmlSetup() { let fields!: any[]; return fields = [ { type: 'text',id: 'name',name: 'name', label: 'Name', validation: { required: true } }, { type: 'text',id: 'description', name: 'description', label: 'Description', validation: { required: true } }, { type: 'text',id: 'image', name: 'image', label: 'Image', validation: { required: true } }, { type: 'number',id: 'price', name: 'price', label: 'Price', validation: { required: true } }, { type: 'radio',id: 'pm', name: 'cakeType', label: 'Pm', validation: { required: true } }, { type: 'radio',id: 'pie', name: 'cakeType', label: 'Pie', validation: { required: true } }, ] } 我正在服务内构建模板，将其注入到组件内，然后在 formTemplate 上循环以获取 HTML 中的所有字段。 <input id="{{template.id}}" type="{{template.type}}" [name]="template.name" [formControlName]="template.name" [attr.value]="template.id"> 我确实尝试过 [value]="template.id"/ value="{{template.id}}" 但只有这个版本可以工作[attr.value]="template.id"。知道原来有一个三元 [attr.value]="(template.type === 'radio') ? template.id: null" 过滤其他字段。 但是像这样，我可以看到其他输入正在更新，但无线电类型没有更新。 也许我累了，但不知道该往哪里看。 恐怕您无法使用 FormControlName 将类型单选和值动态分配给输入。我认为你唯一能做到的就是使用两个 *ngIf （一个用于输入类型无线电，另一个用于其余） <form [formGroup]="formCake"> <ng-container *ngFor="let template of formTemplate"> <label for="{{template.id}}">{{template.label}}: </label> <input *ngIf="template.type==='radio'" [id]="template.id" type="radio" [name]="'_'+template.name" [value]="template.type == 'radio' ? template.id: null" [formControlName]="template.name" /> <input *ngIf="template.type!=='radio'" id="{{template.id}}" [type]="template.type" [name]="'_'+template.name" [value]="template.type == 'radio' ? template.id: null" [formControlName]="template.name" /> </ng-container> </form>

Angular 11如何使用反应式表单验证confirmPassword与密码相同

从 '@angular/core' 导入 { Component, OnInit }; 从 '@angular/forms' 导入 { FormControl, FormGroup, Validators }; @成分（{ 选择器：'应用程序用户注册'， templateUrl: './用户注册。

如何使用formControlName并处理嵌套的formGroup？

正如 Angular 文档所说，我们可以在表单中使用 formControlName ： 英雄详情 FormGroup 中的 FormControl 正如 Angular documentation 所说，我们可以在表单中使用 formControlName： <h2>Hero Detail</h2> <h3><i>FormControl in a FormGroup</i></h3> <form [formGroup]="heroForm" novalidate> <div class="form-group"> <label class="center-block">Name: <input class="form-control" formControlName="name"> </label> </div> </form> 正如他们所说... 如果没有父 FormGroup，[formControl]="name" 可以更早地工作，因为该指令可以独立运行，也就是说，它可以在不位于 FormGroup 中的情况下工作。对于父 FormGroup，名称输入需要语法 formControlName=name 才能与类中正确的 FormControl 关联。此语法告诉 Angular 查找父 FormGroup（在本例中为 HeroForm），然后在该组内查找名为 name 的 FormControl。 无论如何，几个月前我问this来弄清楚formControlName和[formControl]之间有什么区别。 现在我的问题是：将 formControlName 与嵌套 FormGroup 一起使用怎么样？ 例如，如果我有以下表单结构： this.myForm = fb.group({ 'fullname': ['', Validators.required], 'gender': [], 'address': fb.group({ 'street': [''], 'houseNumber': [''], 'postalCode': [''] }) }); 使用 formControlName 将“street”（或“houseNumber”或“postalCode”）绑定到相关 HTML 元素的正确方法是什么？ 您可以使用表单组，它基本上是一个控件集合（控件是指 html 表单中给出的字段），在您的打字稿语法中定义并使用 formControlName 指令绑定到您的 HTML 元素，例如 this.myForm = fb.group({ 'fullname': ['', Validators.required], 'gender': [], 'address': fb.group({ 'street': [''], 'houseNumber': [''], 'postalCode': [''] }) }); 模板： <form [formGroup]="myForm" > <div class="form-group"> <label for="fullname">Username</label> <input type="text" id="username" formControlName="fullname" class="form-control"> </div> <div class="radio" *ngFor="let gender of genders"> <label> <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label> </div> <div formGroupName="address"> <div class="form-group"> <label for="street">Username</label> <input type="text" id="username" value="street" formControlName="street" class="form-control"> </div> <div class="form-group"> <label for="houseNumber">Username</label> <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control"> </div> <div class="form-group"> <label for="postalCode">Username</label> <input type="text" id="username" value="street" formControlName="postalCode" class="form-control"> </div> </div> </form> 一个 formGroup 可以由一个嵌套的 formGroup 组成，并且层次结构可以继续，但是在访问值时它相当简单。 确实如此。查看formGroupName this.myForm = fb.group({ 'fullname': ['', Validators.required], 'gender': [], 'address': fb.group({ 'street': [''], 'houseNumber': [''], 'postalCode': [''] }) }); <form [formGroup]="myForm" > <div class="form-group"> <label for="fullname">Username</label> <input type="text" id="username" formControlName="fullname" class="form-control"> </div> <div class="radio" *ngFor="let gender of genders"> <label> <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label> </div> <div formGroupName="address"> <div class="form-group"> <label for="street">Username</label> <input type="text" id="username" value="street" formControlName="street" class="form-control"> </div> <div class="form-group"> <label for="houseNumber">Username</label> <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control"> </div> <div class="form-group"> <label for="postalCode">Username</label> <input type="text" id="username" value="street" formControlName="postalCode" class="form-control"> </div> </div> </form> tl；博士： 您可以将表单分解为使用嵌套 formgroups 的组件，并且 formcontrolname 可以正常使用。 我倾向于使用的方法是，由于嵌套表单组通常用于指定表单的单独部分，因此我倾向于将其分解为组件并将这些组件传递给嵌套表单组作为输入参数。 因此，在您的情况下，我将有一个 address 组件，它采用表单组作为参数： <app-address [formGroup]="myForm.get('address')"></app-address 在该组件内部，我只会有一个将在 html 中使用的 @Input() formGroup： <div [formGroup]="formGroup"> .... 这样您就可以像平常一样显式引用控件名称，因为它将成为此表单组的一部分。 此外，请记住该表格是作为参考传递的。您的更改将在父组件的 myForm 元素中进行说明，如果您需要访问不在您的 formgroup 中的表单部分（验证、更改检测等），您始终可以传递整个表单并只需将 formgroup 定义为明确引用内部组： <div [formGroup]="formGroup.get('adress')"> （假设您传递了整个表单对象 编码愉快！ 我正在努力解决 Angular 10 中的一个问题。 我有一个“parent”form group“forma”，它有几个依赖组：“company”，同时“company”有两个 “孩子”与其他组，msgAccounts和socialMedia。 当我填写表单并提交时，在后端一切都是正确的，我可以看到这些数据如何存储在数据库中 正确，但是当我收到这个 json 时，我无法显示数据 控件中的“company.msgAccounts”和“company.socialMedia”内 （输入）。这是我从服务器得到的： { name:'', active: '', ........ company:{ msgAccounts:{line: "@linedemo", whatsapp: "0325554244"}, socialMedia: {fb: '', tw: '', is: ''} } .......... } this.forma = this.fb.group( { siteName : [ '', [Validators.required, Validators.minLength(5)]], siteEmail : [ '', [Validators.required, Validators.minLength(5)]], // defaultLocation: [ '', [Validators.required, Validators.minLength(10)]], active : [ true, [Validators.required, Validators.minLength(5)]], mainLanguage: ['' , [Validators.required, Validators.minLength(2)]], company: this.fb.group({ name: [''], address: [''], phone: [''], msgAccounts: this.fb.group({ line: [], whatsapp: [] }), socialMedia: this.fb.group({ fb: [], is: [], tw: [] }) }) }); And the html: (Sorry about the indentation, when it was not easy using this editor, and I just pasted a part of the code in order to do it as shorter as possible). <mat-tab-group> <mat-tab label="settings"> <form autocomplete="off" > <ng-template ng-template matTabContent> <mat-tab-group [formGroup]="forma"> <mat-tab label="global"> // All this fields have are fine </mat-tab> <mat-tab formGroupName="company" label="company"> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0">Details</h5> </div> <div id="company-details"> <div class="form-group row"> <div class="col-sm-3"> <input type="text" class="form-control" id="name" name="name" placeholder="Company name" formControlName=name> </div> </div> <div class="form-group row" formGroupName="msgAccounts"> <div class="col-sm-6"> <input type="text" class="form-control" id="line" name="line" placeholder="line" formControlName=line> </div> <div class="col-sm-6"> <input type="text" class="form-control" id="whatsapp" name="whatsapp" placeholder="whatsapp" formControlName=whatsapp> </div> </div> <div class="form-group row" formGroupName="socialMedia" > <div class="col-sm-6"> <input type="text" class="form-control" id="is" name="is" placeholder="Is" formControlName=is> </div> </div> </div> </div> </mat-tab> </mat-tab-group> <div class="form-group row"> <div class="col-sm-10"> <button type="submit" (click)="saveConfig()">Save</button> </div> </div> </ng-template> </form> </mat-tab> </mat-tab-group> 在搜索类似的东西时，但如果需要构建FormGroup动态，您可以执行以下操作： 打字稿 // ... export class MyComponent implements OnInit { public myForm: FormGroup = new FormGroup({ fullName: new FormControl('', Validators.required), gender: new FormControl(), }); public constructor( private fb: FormBuilder, ) { // ... } public ngOnInit(): void { const addressGrp = this.fb.group({}); // OR new FormGroup({}) this.myForm.addControl('address', addressGrp); // adding address to group ahead const fieldsToAppend = ['street', 'houseNumber', 'postalCode']; // this can come from API response too fieldsToAppend.forEach(propName => addressGrp.addControl(propName, this.fb.control(''))); // it can be also: // 1. new FormControl() // 2. this.fb.control('', Validators.required))) // 3. new FormControl('', Validators.required) // this.myForm.get('address').value === {street: '', houseNumber: '', postalCode: ''} } } HTML <form [formGroup]="myForm" > ... <div formGroupName="address"> ... <input class="form-control" formControlName="street" /> ... <input class="form-control" formControlName="houseNumber" /> ... <input class="form-control" formControlName="postalCode" /> </div> </div>

如何在嵌套反应式表单中添加和删除数组？

我有一个需要复制的嵌套反应表单数组。出于某种原因，我只是。能够复制数组的一部分。这是代码的链接。 嵌套表格数组 您只会看到

Angular DynamicFormComponent 不显示表单字段

我正在尝试使用 Angular 创建动态表单，我可以将模型类传递给自定义 DynamicFormComponent 并让它根据类属性生成表单字段。不过，我很...

为什么角度表单自定义验证不起作用？[已解决]

**大家好 我有 Angular 项目，对于其中的注册表，我创建了一个用于密码，另一个用于确认密码，我收到了两个错误 第一：** 错误类型错误：

动态删除嵌套表单 (FormRecord) 中的 FormControl 会导致“没有与此调用匹配的重载”

我正在使用一个角度应用程序，我需要在表单记录中动态添加/删除表单控件（复选框）。 我在 stackblitz 上创建了这种行为的最小版本，重要的是......

显示在角度反应形式负载中选中的复选框

我想在表单加载时显示选中的复选框。 在我的 Html 页面中：- 活跃 我想在表单加载时显示选中的复选框。 在我的 Html 页面中：- <div> Is Active </div> <div class="form-group"> <input type="checkbox" formControlName="IsActive" [ngModel]="isactivechk"> </div> 我的 .ts 页面中的代码 export class UserregistrationComponent { isactivechk:boolean=true; } 这是在父控制器中使用它的子控件。 如果您正在使用 Angular Reactive Forms 并希望在表单加载时预先选中复选框，您可以按照以下步骤操作： 导入所需的模块：确保您已在组件文件中导入必要的模块（例如，your-component.ts） this.myForm = this.formBuilder.group({ // Other form controls... myCheckbox: [true] // Set initial value to true for a pre-checked checkbox }); 在模板中绑定复选框： 在组件的模板文件（例如 your-component.component.html）中，使用 formControlName 指令将复选框控件绑定到表单组 <form [formGroup]="myForm"> <!-- Other form controls... --> <input type="checkbox" formControlName="myCheckbox"> Check me </form> 您可以使用 formBuilder 设置值 constructor(private formBuilder: FormBuilder) { this.userForm = this.formBuilder.group({ IsActive: new FormControl(true) // Set initial value here }); }

使用reactiveForms和FileUpload组件角度上传文件

我使用primeng作为模板。 我正在使用 p-fileupload 组件，但我需要以反应形式使用它，所以我想知道将 formControlName 放在哪里，因为我没有得到任何输入或其他东西...

使用 Angular 中 REST API 的数据创建级联下拉列表

如果用户在第一个下拉列表中选择一个选项，根据选择，将根据该选择填充第二个选择，并且当用户根据他们的