angular-reactive-forms 相关问题

关于角度反应形式的问题,一种用于以反应式方式创建表格的角度技术。将此标记用于不是特定于单个Angular版本的问题。

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

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

回答 3 投票 0

如何使用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>

回答 5 投票 0

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

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

回答 1 投票 0

Angular DynamicFormComponent 不显示表单字段

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

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

我想在表单加载时显示选中的复选框。 在我的 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 }); }

回答 2 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

Angular 12 - TypeError:无法读取 null 的属性(读取“writeValue”)

Angular 12 - TypeError:无法读取 null 的属性(读取“writeValue”) 我正在创建一个通用文本输入组件,在为项目提供服务时一切正常,但在构建的项目中......

回答 9 投票 0

如何设置可选或条件表单ControlName?

长话短说: 我正在寻找一种能够根据某些条件添加/填充或不添加属性“formControlName”的方法。 null/空字符串值对我来说很好,但是 Angular ...

回答 1 投票 0

patchValue 上的 Angular PrimeNG p 日历反应形式错误位置 2 出现意外文字

在 Angular 13 应用程序中,使用 PrimeNG Calendar 在 Angular 13 应用程序中,使用 PrimeNG Calendar <p-calendar [minDate]="today" [showIcon]="true" styleClass="form-control" showButtonBar="true" dateFormat="dd/mm/yy" inputId="icon" placeholder="dd/mm/yy" formControlName="eventStartDate"></p-calendar> 在反应式表单中使用,它在保存新表单时工作正常。我也使用相同的表单进行编辑。 编辑基于代码加载数据的表单。 但是当 patchValue 到表单时,出现错误 错误位置 2 出现意外文字 编辑代码 loadEventToEdit() { this.eventService.getEventByCode(this.eventCode).subscribe((res) => { this.event = res; console.log('the event to update', this.event); this.theForm.patchValue(res); 其余字段路径值工作正常。 在patchValue之前将日期设置为新日期。 loadEventToEdit() { this.eventService.getEventByCode(this.eventCode).subscribe((res) => { this.event = res; console.log('the event to update', this.event); this.event.timing.eventStartDate = new Date( this.event.timing.eventStartDate ); this.theForm.patchValue(this.event); 为需要修补资源的资源提供完整的路径。 对于 FormArray,你必须先制作 getter,然后你可以使用 Push 或 insert 方法来修补表单数组 loadEventToEdit() { this.eventService.getEventByCode(this.eventCode).subscribe((res) => { this.event = res; this.theForm.controls['eventStartDate'].patchValue(this.event.timing.eventStartDate); }) } 我也有类似的错误。 确保字段类型为日期,并将其设置为表单上 patchValue 之前的新日期。 一种方法是使用 DayJS。 let dates = [ dayjs(feature?.start_date, 'MM-DD-YYYY').toDate(), dayjs(feature?.end_date, 'MM-DD-YYYY').toDate(), ]; this.form.patchValue( { dateRange: dates || null }, { emitEvent: false, onlySelf: true, } ); P-Calendar 组件需要 Date 对象作为值,不能将其传递给其他类型的对象。因此,在修补时,请务必访问表单的控件并使用日期对象创建它。 response => { this.yourForm.controls['likeStartDate'].patchValue(new Date(response.startDate)); }

回答 5 投票 0

如何在 Angular 14 Reactive Forms 中使用 Pipe?

我们使用 Angular Reactive Forms 和管道来格式化数据,这在 Angular 9 中运行良好,但升级到 14 后。我们不能再在 Angular Reactive Forms 中使用管道了吗? 期望...

回答 2 投票 0

Angular 6 getRawValue() 将不会返回禁用值

我有一个示例表格如下: 东西:IStuff; 构建表单(){ this.createForm = this.form.group({ Val1: [{ 值: '', 禁用: true }], Val2: [{ 值: '', di...

回答 4 投票 0

Angular - 无法使用 Material Datepicker 取消订阅 valueChanges

我在 Angular Material Datepicker 中发出日期时遇到了一个持续的问题。我正在使用一个应用程序,其中 Contentstack 中有 JSON 文件。 JSON 文件具有以下控件:...

回答 1 投票 0

角反应形式的验证器无法正常工作?

我有这项服务,我正在尝试验证邮政编码字段,但是 (result ? null : { IsInvalid: true }) 永远不会执行。 反应式是否正常工作或者逻辑/用法错误? @Injectabl...

回答 1 投票 0

nz-switch 由于更新值而无法正常工作

食品卫生链接 ... <form [formGroup]="businessFoodHygieneForm"> <div class="box p-4 d-flex jc-between ai-center"> <span> Food Hygiene Link </span> <label> <nz-switch class="switch-middle ms-2" formControlName="foodHygieneLink" (ngModelChange)="onFoodHygieneChange($event)"> </nz-switch> </label> </div> </form> .ts 组件: foodHygieneLink: new FormControl(''), onFoodHygieneChange(status: boolean): void { this.foodHygieneLink = status; const body = { foodHygieneLink: status ? 'Yes' : 'No' }; this.bizStore.dispatch( businessAction.updateBusiness({ body: body, bid: this.bid, }) ); } 我尝试使用nz-switch进行更新并成功更新,但如果开关更新为“否”,则开关按钮不起作用。它应该关闭,但始终开启。 我怀疑的是,可观察到的 foodHygieneLink 值可能是“是”或“否”,而不是布尔值。 因此,当值为 <nz-switch> 时,No 将被设置为打开。 您可以通过在将值设置为 foodHygieneLink FormControl 之前将“是”或“否”转换为布尔值来解决此问题。 this.businessFoodHygieneForm.patchValue({ foodHygieneLink: selectedBusiness?.foodHygieneLink === 'Yes', }); 演示@StackBlitz

回答 1 投票 0

如何清除 Angular Reactive Forms 中的 FormArray

我正在重置表单。它重置整个表单,但 FormArray 除外。 创建表单并在其中声明 formArray 创建表单(){ this.invoiceForm = this.formBuilder.group({ '

回答 3 投票 0

删除表单数组元素反应形式角度

我正在尝试以角度反应形式从 formArray 中删除数组元素,因为我不想显示空数组元素。我需要删除所有控件都包含 null 值或

回答 3 投票 0

从 formArray 中删除 FormControl

我创建了我的FormGroup,如下所示 this.GSTNForm = this.formbuilder.group({ gstRegistrationStatusId: new FormControl(''), ReasonForNonApplicabilityofGST: new FormControl(''),

回答 3 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.