angular-reactive-forms 相关问题

如何使用 ssr 应用程序使我的 formControlName 在 Angular 17 的子输入组件中工作

我收到此错误： main.ts:6 ERROR 错误：NG01050：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并向其传递现有的 FormG...

如何将 ng-select 包装在自定义表单控制器中？

我尝试创建一个 stackblitz 来展示我正在谈论的内容，但我根本无法让它工作，所以我只能寻求帮助。我有 2 个组件： 组件 1 是自定义表单

如何在不声明的情况下将 FormArray 添加到 FormGroup 中，并以编程方式添加

我试图学习为传递 json 的表单创建通用模板，将定义 所呈现的表的结构。 我无法将控件和表单数组添加到 fromGroup

带有其他选项的单选按钮

我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项。 我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项。 <p> <label for="favFruit"><b>What's your favorite fruit</b></label> <br /> <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" /> Apple <br /> <input type="radio" value="Banana" id="favFruit" name="favFruit" formControlName="favFruit" /> Banana <br /> <input type="radio" value="Orange" id="favFruit" name="favFruit" formControlName="favFruit" /> Orange <br /> <input type="radio" value="Pear" id="favFruit" name="favFruit" formControlName="favFruit" /> Pear <br /> <input type="radio" value="Grapes" id="favFruit" name="favFruit" formControlName="favFruit" /> Grapes <br /> <input type="text" value="" id="favFruit" name="favFruit" formControlName="favFruit" /> </p> 我尝试过添加另一个值作为文本输入字段，但是，这允许用户选择多个选项。我希望当用户单击“其他”（选项）时弹出，以便用户可以选择其他，但这将是他们唯一的选择。 我建议用于填充其他值的 <input> 元素不要使用 formControlName 指令。 当输入文本字段时，它应该更新 favFruit 控制值，这会导致取消选中之前选中的单选按钮。 <input type="text" value="" id="favFruit" name="favFruit" #otherFavFruit (input)="onOtherFavFruitInput(otherFavFruit.value)"> onOtherFavFruitInput(value: string) { this.form.controls.favFruit.setValue(value); } 另一种情况是，当您在文本字段中输入其他值时，您改变主意并选择其中一个单选按钮，您可以使用 (change) 事件来重置输入字段。 <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> import { Component, ElementRef, ViewChild } from '@angular/core'; @ViewChild('otherFavFruit') otherFavFruit!: ElementRef<HTMLInputElement>; onFavFruitChecked(event: any) { this.otherFavFruit.nativeElement.value = ''; } 请注意，您可以使用 *ngFor 生成一组表单控件，旨在减少 HTML 中的代码。 <ng-container *ngFor="let fruit of fruits"> <input type="radio" [value]="fruit" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> {{ fruit }} <br> </ng-container> fruits = ['Apple', 'Banana', 'Orange', 'Pear', 'Grapes']; 演示@StackBlitz

如果我在 mat-dialog 中单击取消提交按钮，如何取消选中 mat-checkbox

我编写了一个对话框，其中包含要从表中删除的所有选定行。现在，当我提交对话框时，我希望也取消选中激活的复选框。 最好的方法是什么...

如何使此密码匹配验证工作

我有这个代码来检查两个密码是否匹配，但是，它没有按预期工作。我已经尝试过在一些旧问题中看到的内容，但没有成功。 我的组件模板中有这个...

带有嵌套 FormGroup 的 FormArray。如何访问嵌套的表单组控件？

我有一个包含 3 个 FormGroup 的 FormArray，每个表单组有 2 个控件。我不确定如何访问表单组中的控件来设置表单控件名称。 设置表格 这个.form = ...

角离子反应形式：形式不显示

我的 Angular/Ionic 表单遇到问题，无法在网络上正确显示表单控件。目前，我正在尝试实现一个动态表单，用户可以在其中输入

嵌套 formArrays 的 HTML 迭代

是否可以将一个 formArray 嵌套在其他 formArray 中并在 HTML 视图中正确显示？ 我正在基于 API 响应构建分页表单，因此我正在迭代对

如何实现Renderer2在Angular中制作表单

我正在 Angular 15 中开发一个应用程序，它显示动态查询的表单。我从后端获取表单参数。 我从后面得到这样的东西 { “鳕鱼Respuesta”...

如何获取自定义验证器中的所有表单控件（动态创建的字段组）

我正在使用表单生成器构建动态表单，如下所示： 到目前为止我一直在 stackblitz 中尝试的可运行代码 我已阅读文档并看到了这个，例如但找不到另一个例子

如何用不同的键值初始化角反应形式

我正在尝试使用给定的键名称和始终相同的键值构建角度形式。我已经成功构建了一种表单，但输出格式并不完全是我需要的格式。 更改键...

Angular - 如何验证 ngx-intl-tel-input 中的 maxlength

我在我的 Angular-12 项目多步骤中使用 ngx-intl-tel-input 包。我有这个代码： 成分： 进口 { 搜索国家/地区字段， 国家ISO, 电话号码格式 } 来自 'ngx-intl-tel-inpu...

如何在 Angular 17 中创建响应式表单

我有这个HTML代码： ... 我有这个 HTML 代码： <form (ngSubmit)="onSubmit()"> <div class="row gy-3"> <div class="col-lg-6"> <label class="form-label text-sm text-upperc ase" [(ngModel)]="firstName" name="firstName">Ime</label> <input class="form-control form-control-lg" type="text" id="firstName" placeholder="Unesite svoje ime"> </div> <div class="col-lg-6"> <label class="form-label text-sm text-uppercase" [(ngModel)]="lastName" name="lastName">Prezime</label> <input class="form-control form-control-lg" type="text" id="lastName" placeholder="Unesite svoje prezime"> </div> <div class="col-lg-6"> <label class="form-label text-sm text-uppercase" [(ngModel)]="email" name="email">Email</label> <input class="form-control form-control-lg" type="email" id="email" placeholder="e.g. [email protected]"> </div> <div class="col-lg-6"> <label class="form-label text-sm text-uppercase" >Broj telefona</label> <input class="form-control form-control-lg" type="tel" id="phone" placeholder="e.g. +381 6665544"[(ngModel)]="phoneNumber" name="phoneNumber"> </div> <div class="col-lg-6"> <label class="form-label text-sm text-uppercase" >Ime kompanije(opciono) </label> <input class="form-control form-control-lg" type="text" id="company" placeholder="Ime kompanije"[(ngModel)]="companyName" name="companyName"> </div> <div class="col-lg-12"> <label class="form-label text-sm text-uppercase" >Adresa 1</label> <input class="form-control form-control-lg" type="text" id="address" placeholder="Postanski broj,ulica i broj"[(ngModel)]="address1" name="address1"> </div> <div class="col-lg-12"> <label class="form-label text-sm text-uppercase" >Adresa 2</label> <input class="form-control form-control-lg" type="text" id="addressalt" placeholder="Sprat,zgrada,ulaz"[(ngModel)]="address2" name="address2"> </div> <div class="col-lg-6"> <label class="form-label text-sm text-uppercase" >Grad</label> <input class="form-control form-control-lg" type="text" id="city"[(ngModel)]="city" name="city"placeholder="Unesite grad"> </div> <div class="col-lg-6"> <label class="form-label text-sm text-uppercase" >Drzava</label> <input class="form-control form-control-lg" type="text" id="state" [(ngModel)]="state" name="state"placeholder="Unesite drzavu"> </div> <div class="col-lg-12 form-group"> <button class="btn btn-success" type="submit">Porucite</button> </div> </div> </form> 这是我的checkout.component.ts： import { Component, OnInit } from '@angular/core'; import { FormGroup, FormsModule } from '@angular/forms'; import { Order } from '../models/order.model'; @Component({ selector: 'app-checkout', standalone: true, imports: [FormsModule], templateUrl: './checkout.component.html', styleUrl: './checkout.component.css', }) export class CheckoutComponent implements OnInit{ billingFormGroup!:FormGroup order:Order = new Order() firstName!:string lastName!:string email!:string phoneNumber!:string companyName!:string address1!:string address2!:string city!:string state!:string constructor(){ } onSubmit() { this.order.firstName=this.firstName this.order.lastName=this.lastName this.order.email=this.email this.order.phoneNumber=this.phoneNumber if(this.companyName)this.order.companyName=this.companyName if(this.address1)this.order.address=this.address1 if(this.address2)this.order.optionalAddress=this.address2 this.order.town=this.city this.order.state=this.state // this.order.firstName=this.billingFormGroup.get('firstName')?.value; // this.order.lastName=this.billingFormGroup.get('lastName')?.value; // this.order.email=this.billingFormGroup.get('email')?.value; // this.order.phoneNumber=this.billingFormGroup.get('phoneNumber')?.value; // if(this.billingFormGroup.get('companyName')?.value != null)this.order.companyName=this.billingFormGroup.get('companyName')?.value; // if(this.billingFormGroup.get('address1')?.value != null)this.order.address=this.billingFormGroup.get('address1')?.value; // if(this.billingFormGroup.get('address2')?.value != null)this.order.optionalAddress=this.billingFormGroup.get('address2')?.value; // this.order.town=this.billingFormGroup.get('city')?.value; // this.order.state=this.billingFormGroup.get('state')?.value; console.log(this.order) } ngOnInit(): void { // this.billingFormGroup=new FormGroup({ // 'firstName':new FormControl('',[Validators.required]), // 'lastName':new FormControl('',[Validators.required]), // 'email':new FormControl('',[Validators.email]), // 'phoneNumber':new FormControl('',[Validators.required]), // 'companyName':new FormControl(''), // 'address1':new FormControl('',[Validators.required]), // 'address2':new FormControl(''), // 'city':new FormControl('',[Validators.required]), // 'state':new FormControl('',[Validators.required]) // }) } } 注释的代码向我抛出错误。此外，未注释的代码在控制台中向我抛出相同的错误： 错误错误：NG01203：没有表单控件名称的值访问器：'firstName'。欲了解更多信息，请访问 https://angular.io/errors/NG01203 我读过一些关于 ControlValueAccessor 的内容，但我不知道如何实现它。 有人能解释一下为什么 Angular 会抛出这个错误吗？这是 Angular 17 中添加的新功能还是其他东西，因为在以前的版本中我没有遇到任何表单问题？ 您无法将 ngModel 绑定到标签。由于标签不提供任何控制值 从;中删除[(ngModel)]="firstName" <label class="form-label text-sm text-upperc ase" [(ngModel)]="firstName" name="firstName">Ime</label>

如何在 Angular 中对静态 JSON 数组执行 CRUD 操作？ （无API）

我有这个 JSON 数组文件。 [ { “id”：1， “姓名”：“约翰·多伊”， “电子邮件”：“[email protected]”， “年龄”：25 ...

如何在多参数 JSON 数组中执行获取、更新、添加和删除操作，就像 Angular 中的 API 一样

我有这个多参数 JSON 数组： 公开课程列表：任意=[ { 编号:1, cName：“角度”， bDesc: "这是 Angular 的基础课程。", 一个...

带有行为主题的角度反应式表单验证

黑社区， 我想知道当存在一些相互依赖的动态字段并且需要调用 API 进行验证时，验证 Angular Reactive Forms 的最佳方法是什么。 我有一个输入，A

结合 HTML 和 Angular 反应式表单验证

我正在构建一个 Angular Reactive Form，并且我有一个数字类型的输入。我已向 FormControl 提供了 Validators.min(0)，但是当我聚焦输入并向下滚动或按住箭头时

无法使用 Angular Reactive Forms 将选择选项的值设置为 ngFor 循环中的第一个元素

我有一个带有 ngFor 循环的选择输入，用于根据颜色数组创建选项。 我需要的行为是自动选择第一个选项，以便角度反应形式可以......

Angular - 自定义验证器不使用组件变量的最新值

我有以下在 ngOnInit 中创建的表单组： 私人 setScreeningStatusForm(screeningStatusData: ClientScreeningStatusModel | 未定义): void { this.screeningStatusForm = ...