angular-reactive-forms 相关问题

我的目标是能够在给定页面上添加具有任意数量过滤器的搜索表单。例如，在我的 HomePageComponent 上，我希望能够执行以下操作：我的目标是能够在给定页面上添加具有任意数量过滤器的搜索表单。例如，在我的 HomePageComponent 上，我希望能够执行以下操作： <app-search-form> <app-searchbox></app-searchbox> </app-search-form> 现在，我的 SearchFormComponent 是： html <form [formGroup]="form" (ngSubmit)="search()"> <ng-content></ng-content> <br /> <button type="submit">Search</button> </form> ts @Component({ selector: 'app-search-form', standalone: true, imports: [ReactiveFormsModule, SearchboxComponent], templateUrl: './search-form.component.html', styleUrl: './search-form.component.css' }) export class SearchFormComponent implements OnInit { form!: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.form = this.formBuilder.group({}); } search() { console.log('Searching...'); console.log(this.form.value); } } SearchboxComponent 是： html <label for="searchbox">Search:</label> <input id="searchbox" formControlName="searchbox" type="text" /> ts @Component({ selector: 'app-searchbox', standalone: true, imports: [ReactiveFormsModule], templateUrl: './searchbox.component.html', styleUrl: './searchbox.component.css', viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] }) export class SearchboxComponent implements OnInit { formGroup!: FormGroup; constructor(private controlContainer: ControlContainer) { } ngOnInit() { this.formGroup = this.controlContainer.control as FormGroup; this.formGroup.addControl("searchbox", new FormControl('', null)); } } 可以添加未来可能的组件，例如 SearchCategoryFilterComponent 和 SearchLocationFilterComponent ，如果给定页面希望这些组件出现在表单中，则可以将它们添加到 <app-search-form> 中。按照我目前的设置方式，我收到错误： NullInjectorError: NullInjectorError: No provider for ControlContainer! 我认为这是因为当在 HomePageComponent 中添加 <app-searchbox></app-searchbox> 时，它不是将 SearchFormComponent 视为其父级并能够注入 ControlContainer，而是将 HomePageComponent 视为父级，它没有表单。如果我将 <app-searchbox></app-searchbox> 移动到 SearchFormComponent 的 <form> 内，UI 和表单提交将按预期工作。我怎样才能得到这个，以便 HomePageComponent 能够指示表单中的内容？允许它添加过滤器不仅允许每个页面有不同的过滤器，还允许每个页面为每个过滤器添加样式。你不能这样做，因为当你使用内容投影时，你想要在子级中投影的内容实际上是在父级上初始化的，因为父级上没有表单，所以没有ControlContainer，因此错误。要解决这个问题，您可以使用 *ngComponentOutlet 的 ng-container 来实现渲染动态组件。 <form [formGroup]="form" (ngSubmit)="search()"> <ng-container *ngComponentOutlet="formComponent"></ng-container> <br /> <button type="submit">Search</button> </form> 我们将要初始化的组件作为 @Input 传递。 @Component({ selector: 'app-root', standalone: true, imports: [SearchFormComponent, SearchboxComponent], template: ` <app-search-form [formComponent]="component"> </app-search-form> `, }) export class App { name = 'Angular'; component = SearchboxComponent; } 完整代码： import { Component, inject, OnInit, Input } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { ReactiveFormsModule, ControlContainer, FormGroup, FormControl, FormBuilder, } from '@angular/forms'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-searchbox', standalone: true, imports: [ReactiveFormsModule], template: ` <label for="searchbox">Search:</label> <input id="searchbox" formControlName="searchbox" type="text" /> `, viewProviders: [ { provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }), }, ], }) export class SearchboxComponent implements OnInit { formGroup!: FormGroup; constructor(private controlContainer: ControlContainer) {} ngOnInit() { this.formGroup = this.controlContainer.control as FormGroup; this.formGroup.addControl('searchbox', new FormControl('', null)); } } @Component({ selector: 'app-search-form', standalone: true, imports: [ReactiveFormsModule, SearchboxComponent, CommonModule], template: ` <form [formGroup]="form" (ngSubmit)="search()"> <ng-container *ngComponentOutlet="formComponent"></ng-container> <br /> <button type="submit">Search</button> </form> `, }) export class SearchFormComponent implements OnInit { @Input() formComponent: any; form!: FormGroup; constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.form = this.formBuilder.group({}); } search() { console.log('Searching...'); console.log(this.form.value); } } @Component({ selector: 'app-root', standalone: true, imports: [SearchFormComponent, SearchboxComponent], template: ` <app-search-form [formComponent]="component"> </app-search-form> `, }) export class App { name = 'Angular'; component = SearchboxComponent; } bootstrapApplication(App); Stackblitz 演示

angular typescript angular-reactive-forms angular18 angular-dynamic-forms

回答 1 投票 0

如何有效地使用具有反应形式的角度信号输入/效果

在 Angular 文档中，我看到了这一点：状态改变是组件内部状态的改变还是信号引起的状态改变？我在使用 Angular 设置表单值时遇到了麻烦

angular angular-reactive-forms angular-signals

回答 1 投票 0

Angular Reactive Form - 获取“formDirective is null”错误

这是我的表格：这是我的表格： <div class="container"> <form formGroupName="checkoutForm"> <section> <div class="row"> <div class="col col-12 col-lg-8"> <div class="row mb-4"> <div formGroupName="deliveryAddress"> <div class="col"> <label class="form-label">First Name</label> <input id="firstName" class="form-control fw-bold" type="text" required formControlName="firstName" (change)="saveToDataStore()"> </div> <div class="col"> <label class="form-label">Last Name</label> <input id="lastName" class="form-control fw-bold" type="text" required formControlName="lastName" (change)="saveToDataStore()"> </div> </div> </div> </div> </div> </section> </form> </div> 这是组件中表单的声明： export class Checkout2Component { checkoutForm: FormGroup; public cart; ngOnInit() { this.checkoutForm = new FormGroup({ deliveryAddress: new FormGroup({ firstName: new FormControl(''), lastName: new FormControl(''), phone: new FormControl(''), address1: new FormControl(''), address2: new FormControl(''), useAsBillingAddress: new FormControl(''), }), applianceDelivery: new FormGroup({ deliveryDate: new FormControl(''), specialInstructions: new FormControl(''), }), paymentMethod: new FormGroup({ // paymentType: 'new FormControl(Credit Card'), cardNumber: new FormControl(''), expMonth: new FormControl(''), expYear: new FormControl(''), CVV: new FormControl(''), defaultCreditCard: new FormControl(''), }) }); console.log('this.checkoutForm', this.checkoutForm.value); // this.initCheckoutForm(); } 运行应用程序时出现以下错误：错误类型错误：this.formDirective 为空 ngOnInit http://localhost:4200/main-A4KJZJDC.js:14 U0 http://localhost:4200/main-A4KJZJDC.js:10 mN http://localhost:4200/main-A4KJZJDC.js:10 MW http://localhost:4200/main-A4KJZJDC.js:10 BC http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 ER http://localhost:4200/main-A4KJZJDC.js:10 __ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 D_ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 ER http://localhost:4200/main-A4KJZJDC.js:10 __ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 http://localhost:4200/main-A4KJZJDC.js:10 bR http://localhost:4200/main-A4KJZJDC.js:10 v_ http://localhost:4200/main-A4KJZJDC.js:10 _P http://localhost:4200/main-A4KJZJDC.js:10 detectorChangesInAttachedViews http://localhost:4200/main-A4KJZJDC.js:10 我无法重现提到的 formDirective 错误。但您没有正确使用 formGroup 指令。您需要应用 [formGroup] 指令并在 FormGroup 元素中提供 <form> 实例，而不是 formGroupName="checkoutForm"。 <form [formGroup]="checkoutForm"> ... </form> 演示@StackBlitz

angular typescript angular-reactive-forms formgroups

回答 1 投票 0

NG01203：表单控件名称没有值访问器：'name'

这是 JOYBOY 已删除问题的重新发布，标题为 NG01203: No value accessor for form control name: 'name' 我已经创建了 Angular 18 应用程序。我正在使用独立的组合

angular typescript angular-reactive-forms angular-forms angular-signals

回答 1 投票 0

如果有条件处理则设置角度必填字段

这是我的表格：初始化定价表格（）：无效{ this.pricingForm = new FormGroup({ 价格：新的FormGroup({ sell_type: new FormControl('', Validators.compose([ 验证...

angular typescript forms angular-reactive-forms

回答 1 投票 0

如何在 Angular 中测试 form.valueChanges？

如何正确进行单元测试（Karma、Jasmine），valueChanges 的发射会调度 FormUpdated 操作？ beforeEach(异步(() => { TestBed.configureTestingModule({ 进口：[...]，

angular karma-jasmine angular-reactive-forms

回答 2 投票 0

Angular Dynamic Reactive 选择选项表单

我正在 Angular 中构建一个多步骤表单，用户可以在其中创建龙与地下城角色。在其中一个步骤中，用户选择一个职业（吟游诗人、牧师）后，他们需要选择一个装备...

json angular forms angular-reactive-forms dynamic-forms

回答 1 投票 0

触摸输入无效时不显示错误消息

我正在开发一个 Angular 组件，如果输入字段被触摸并且无效，我想在该组件中显示错误消息。但是，错误消息并未按预期出现。错误消息&q...

angular typescript angular-material angular-reactive-forms angular-forms

回答 1 投票 0

错误：NG01203：没有表单控件名称的值访问器：'name'

有人可以帮助我吗？我有两个组件“父级”和“子级”。在父组件中，我有这个 formGroup 和两个获取人员和城市的方法。 ngOnInit() { this.form = this.fb.group({ 人：

angular angular-material angular-reactive-forms angular-forms formgroups

回答 1 投票 0

角度错误：NG8002：无法绑定到“formGroup”，因为它不是“form”的已知属性。 [plugin Angular-compiler] // 已进行导入声明

我已经在我的 app.module.ts 中声明了 ReactiveFormsModule，如下所示：应用程序模块.ts 从 '@angular/common/http' 导入 { HttpClientModule }；从 '@angular/common' 导入 { CommonModule } ；导入{NgMo...

angular typescript angular-reactive-forms

回答 1 投票 0

一旦可观察返回，设置反应形式的默认值

我有一些代码 ngOnInit 使用路由变量来过滤特定对象的可观察数组： this.route.paramMap.subscribe(params => { // 获取路由参数（ID）的包装器这个....

angular angular-reactive-forms

回答 2 投票 0

如何使用角度选择

我想选择数据，我之前在后端部分设计为不同的表，根据这个选择的操作进行选择并保存。使用角垫似乎是合乎逻辑的...

angular select angular-material angular-reactive-forms angular-forms

回答 1 投票 0

使用嵌套组件时表单无法显示无效字段

我有一个如下所示的表格：形式 = 形式组({ 名称：FormControl(''), 地址：new FormGroup({ 城市：新的 FOrmControl(''), }) }) 我使用两个组件家长：我有一个看起来像这样的表格： form = formGroup({ name:FormControl(''), adress:new FormGroup({ city: new FOrmControl(''), }) }) 我使用两个组件家长： <form [formGroup]="form" (ngSubmit)="submit()"> <input matInput formControlName="name"> <child-component [group]="form.controls.adress"><child-component/> </form> 孩子： <form [formGroup]="group"> <input matInput formControlName="city"> </form> 现在我的问题是，当我提交表单并且city无效时，红色下划线不显示。提交如何对父子双方产生影响？请尝试以下代码： parent.component.html <form [formGroup]="form" (ngSubmit)="submit()"> <mat-form-field> <input matInput formControlName="name" placeholder="Name"> <mat-error *ngIf="form.controls.name.invalid && (form.controls.name.dirty || form.controls.name.touched)"> Name is required </mat-error> </mat-form-field> <app-child [group]="addressGroup"></app-child> <button type="submit">Submit</button> </form> parent.component.ts import { OnInit, Component } from '@angular/core'; import { ApiResponse } from '../models/apiResponse'; import { ChaptersViewModel } from '../models/chapters.model'; import { HomeService } from './home.service'; import { FormGroup, FormControl, Validators } from '@angular/forms'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.scss'] }) export class ParentComponent implements OnInit { form: FormGroup; ngOnInit() { this.form = new FormGroup({ name: new FormControl('', Validators.required), address: new FormGroup({ city: new FormControl('', Validators.required), }), }); } submit() { this.markAllAsTouched(this.form); if (this.form.valid) { // Handle valid form submission } } markAllAsTouched(group: FormGroup) { Object.keys(group.controls).forEach((key) => { const control = group.get(key); if (control instanceof FormControl) { control.markAsTouched(); } else if (control instanceof FormGroup) { this.markAllAsTouched(control); } }); } get addressGroup(): FormGroup { return this.form.get('address') as FormGroup; } } child.component.html <form [formGroup]="group"> <mat-form-field> <input matInput formControlName="city" placeholder="City"> <mat-error *ngIf="group.controls.city.invalid && (group.controls.city.dirty || group.controls.city.touched)"> City is required </mat-error> </mat-form-field> </form> child.component.ts import { Component, Input } from '@angular/core'; import { FormGroup } from '@angular/forms'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent { @Input() group!: FormGroup; constructor() { } }

angular angular-reactive-forms

回答 1 投票 0

angular-reactive-forms 相关问题

最新问题