angular-reactive-forms 相关问题

html： html: <div class="form-group"> <nz-date-picker class="mt-2" formControlName="obsolete_date" [nzDisabledDate]="disabledDate" *ngIf="aboutForm.value.types.obsolete" [nzFormat]="'dd-MM-yyyy'"> </nz-date-picker> </div> ts： disabledDate = (current: Date): boolean => { const current_date = new Date(); const selected_date = new Date(current); // Calculate yesterday's date const yesterday = new Date(); yesterday.setDate(current_date.getDate() - 1); // Disable if selected date is before yesterday return selected_date < yesterday; }; initializeAboutForm(): void { this.aboutForm = this.formBuilder.group({ obsolete_date: new FormControl(''), }); } setAboutFormData(): void { // Patch the form with values from the loaded product const loadedObsoleteDate = this.loadedProduct?.obsolete_date; console.log('Loaded obsolete date:', loadedObsoleteDate); // Debugging statement result: 19-07-2024 DD-MM-YYYY this.aboutForm.patchValue({ obsolete_date: (loadedObsoleteDate) ? loadedObsoleteDate : '', }); } 我在单击新西兰日期选择器时遇到错误，如何解决此问题？日期选择器不接受空字符串，请使用 null 作为初始值。 initializeAboutForm(): void { this.aboutForm = this.formBuilder.group({ obsolete_date: new FormControl(null), }); }

angular forms date angular-reactive-forms

回答 1 投票 0

Angular - 错误错误：找不到名称为“s..Address”的控件

我在 HTML 中有以下组件：我在 HTML 中有以下组件： <div> <form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit()"> <div class="form-row" *ngFor="let fields of AddressInfo.controls; let i = index" > <div class="form-group col-md-3" > <label for="password"><b>Street Address</b></label> <input type="text" class="form-control" placeholder="Street Address" name="SA" formControlName="streetAddress" /> </div> <div class="form-group col-md-3" > <label for="password"><b>City</b></label> <input type="text" class="form-control" placeholder="City" name="city" formControlName="city" /> </div> <div class="form-group col-md-3" > <label for="password"><b>State</b></label> <input type="text" class="form-control" placeholder="State" name="state" formControlName="state" /> </div> </div> <br/> <button type="submit" class="btn btn-primary">Submit</button> </form> <br/> <button type = "button" class="btn btn-primary" (click)="addNewAddress()" >Add New Address</button> </div> <h4>OUTPUT</h4> <div>{{output}}</div> 和.ts文件： import { Component, OnInit } from '@angular/core'; import { FormArray, FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'app-dynamic-form', templateUrl: './dynamic-form.component.html', styleUrls: ['./dynamic-form.component.css'], }) export class DynamicFormComponent implements OnInit { dynamicFormGroup!: FormGroup; output!: any; constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.dynamicFormGroup = this.formBuilder.group({ address: new FormArray([this.createItem]), }); } addNewAddress(): void { (this.dynamicFormGroup.get('address') as FormArray).push(this.createItem); } get formControllers() { return this.dynamicFormGroup.controls; } get AddressInfo() { return this.formControllers['address'] as FormArray; } get createItem(): FormGroup { return this.formBuilder.group({ streetAddress: [], city: [], state: [], }); } onSubmit() { this.output = this.dynamicFormGroup.controls['address'].value; console.log(this.output); } } 出现此错误：错误错误：找不到名称为“streetAddress”的控件错误错误：找不到名称为“city”的控件错误错误：找不到名称为“state”的控件使用此链接： https://dev.to/mana95/how-to-handle-dynamic-form-fields-in-reactive-forms-in-angular-3c0f https://codesandbox.io/p/devbox/hardcore-goldberg-ytsxn5?file=%2Fsrc%2Fapp%2Fdynamic-form%2Fdynamic-form.component.html%3A1%2C1-25%2C22 有什么解决办法吗？谢谢。您的 HTML 响应式表单结构不正确：缺少 formArrayName="address" 属性。提到的控件应包装在 FormGroup 中。 <div class="form-row" formArrayName="address" *ngFor="let fields of AddressInfo.controls; let i = index" > <ng-container [formGroupName]="i"> <div class="form-group col-md-3"> <label for="password"><b>Street Address</b></label> <input type="text" class="form-control" placeholder="Street Address" name="SA" formControlName="streetAddress" /> </div> <div class="form-group col-md-3"> <label for="password"><b>City</b></label> <input type="text" class="form-control" placeholder="City" name="city" formControlName="city" /> </div> <div class="form-group col-md-3"> <label for="password"><b>State</b></label> <input type="text" class="form-control" placeholder="State" name="state" formControlName="state" /> </div> </ng-container> </div> 演示@StackBlitz

angular typescript angular-reactive-forms formarray formgroups

回答 1 投票 0

如何在表单组中使用对象数组作为控件

我需要在 Angular 中动态创建表单。我有以下模型：值 = [ { 编号：14，组：“基础”，字段：“食物”，评论：“很好”， }, { 编号：1...

angular forms angular-reactive-forms

回答 1 投票 0

使用 DRY（不要重复自己）原则创建 FormGroup 的好方法是什么？

我不相信 Angular 中创建表单组的方式。我创建这样的表格：让 form = this._formBuilder.group({ nameAditionalCtrl: [adicional.nameAditional, [验证器。

angular forms angular-reactive-forms formbuilder

回答 1 投票 0

如何获取 Angular 中某个主题的链接？

我正在尝试编写一个将附加到组件的指令，这样就可以订阅其事件。该指令应作为连接器 @成分（{ 选择...

angular validation angular-reactive-forms

回答 1 投票 0

如何正确地将孩子转移到Angular指令

我正在尝试将子级中的所有 FormGroup 传递给我的指令。为什么它们没有被传播？我尝试使用 ViewChildren 和 ContentChildren 但结果未定义我正在尝试将子项中的所有 FormGroup 传递给我的指令。为什么不转发？我尝试使用 ViewChildren 和 ContentChildren 但结果未定义 <div block="tab" [class.is-active]="toggleGroup.value === 'output'" fieldGroupValidation> <app-rubric-theme-date></app-rubric-theme-date> <app-authors></app-authors> </div> @Directive({ selector: '[fieldGroupValidation]' }) export class FieldGroupValidationDirective implements OnInit, OnDestroy { @ViewChildren(FormGroup) controls: QueryList<FormGroup>; constructor( ) {} ngOnInit() { // console.log('contorls', this.controls); // console.log('controls names: ', this.controls); } ngAfterViewInit() { console.log('contorls', this.controls); } 模板中的组件内部有表单组看，那里有一个问题，在你的 @ViewChild 中，你指定你希望在其他组件中拥有所有表单，（我认为） <div block="tab" [class.is-active]="toggleGroup.value === 'output'" fieldGroupValidation> <app-rubric-theme-date></app-rubric-theme-date> <app-authors></app-authors> </div> 就像，在您的指令中，您希望在指令范围内收到一个 FormGroup 或所有其他 FormGroup，但事实并非如此。 FormGroup 不是你可以在 ViewChild/ViewChildren/ContenChildren/ContentChild 中引用的类，因为它是 Angular 使用的功利类，你只能引用 DOM 元素。 https://angular.dev/api/forms/FormGroup 您需要指定您想要从组件中获得的内容，如下所示： <div block="tab" [class.is-active]="toggleGroup.value === 'output'" fieldGroupValidation> <app-rubric-theme-date></app-rubric-theme-date> <app-authors #authors></app-authors> </div> 现在你的打字稿中可能是这样的： @Directive({ selector: '[fieldGroupValidation]' }) export class FieldGroupValidationDirective implements OnInit, OnDestroy, AfterViewInit //Do not forget to implement the interface { @ViewChild("authors") authorsComponent!: YourAuthorComponentClass; //You could also do this: @ViewChild(RubicThemeComponent) myRubicThemeComponent!: RubicThemeComponent; constructor( ) {} ngOnInit() { // console.log('contorls', this.controls); // console.log('controls names: ', this.controls); } ngAfterViewInit() { console.log(this.authorsComponent); } 现在，您可以访问作者组件中的所有其他属性，然后您可以像这样指定控件： this.authorsComponent.myFormsControls 现在您可以使用表单进行其他操作了。

angular angularjs angular-reactive-forms formgroups viewchild

回答 1 投票 0

无法获取 Angular 反应形式 AsyncValidatorFn 来消除抖动并设置控制错误

我有一个 Angular 反应式表单，其中表单组具有昂贵的验证，因此我想尝试消除对实际验证的调用。我发现了很多其他关于此的帖子，例如这里......

angular angular-reactive-forms

回答 1 投票 0

Angular 单选按钮取消选中选择上的其他控件

使用 Angular 17 和响应式形式。表单组中有两个控件，都是单选按钮。然而，当一个控件发生更改时，它会清除其他控件。然而，价值是va...

angular angular-reactive-forms

回答 2 投票 0

如何在 Angular onblur 事件中动态为 ngModel 赋值

我在 HTML 中有多个输入文本框，其中包含 [(ngModel)]。在打字稿中，我试图在所有输入框的输入模糊事件上动态为 [(ngModel)] 分配一个值。尝试了以下