angular-reactive-forms 相关问题

我有一个像这样的父组件。我有一个像这样的父组件。 <form [formGroup]="validateFormGroup"> <div> <mat-form-field> <input matInput placeholder="Name" maxlength="150" formControlName="name" required> </mat-form-field> </div> </form> <div class=""> <app-calendar-time-zones (getSelectedTimeZone)="setTimeZoneSelected($event)" ></app-calendar-time-zones> </div> 在 app-calendar-time-zones 组件中，这是我的 HTML 代码 <div class="calendar-container"> <mat-form-field> <mat-label>Select time zone</mat-label> <mat-select [(ngModel)]='selectedTimeZone.displayName' class='form-control' > <mat-option *ngFor="let timezone of filteredTimeZones | timezonesFilter : searchValue" [value]="timezone.id" (click)="timeZoneSelected(timezone)"> {{timezone.offset + ' ' + timezone.displayName}} </mat-option> </mat-select> </mat-form-field> </div> 在子组件 Ts 文件中，我正在设置这样的值，但其垫选择元素未设置为所选值。 this.selectedTimeZone = this.filteredTimeZones[0]; // selectedTimeZone i am getting here is this == {id: "Africa/Abidjan", displayName: "Greenwich Mean Time", useDaylightTime: false, rawOffset: 0, offset: ""} 显示以下空下拉列表。但是，如果我单击下拉图标，我就可以看到所有选项。 and in the browser if i inspect mat-select element. ngModel value is setting . 要自动选择，通过 ngModel 传递的值必须与选项的 value 匹配。所以，我猜 selectedTimeZone.displayName 与绑定到您的选项的任何 timezone.id 都不匹配。这对我有用 <mat-form-field> <mat-label for="">Doctor Name</mat-label> <mat-select [(ngModel)]="patientInfo.doctorName"> <mat-option value="" selected></mat-option> @for (doctor of doctorsList(); track doctor) { <mat-option [value]="doctor.name">{{ doctor.name }}</mat-option> } </mat-select> </mat-form-field>

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

回答 2 投票 0

Angular - 使用电话指令将值粘贴到控件以格式化值时，验证器不起作用

我们在项目中使用 Angular 17 和响应式表单。我们编写了一个自定义指令，将输出格式化为美国电话号码格式 111-222-3333。我们看到的是，当

angular typescript angular-reactive-forms angular-directive angular17

回答 1 投票 0

复制时带有验证器的 Angular Phone 指令不起作用

我们在项目中使用 Angular 17 和响应式表单。我们编写了一个自定义指令，将输出格式化为美国电话号码格式 111-222-3333。我们看到的是，当

angular angular-reactive-forms

回答 1 投票 0

如何将表单传递到 Angular Material 对话框

我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 Angular 17 和 Angular Material。在我的组件中，我试图定义一个这样的表单：我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 Angular 17 和 Angular Material。在我的组件中，我试图定义这样的形式： <form #myForm="ngForm" (ngSubmit)="submitForm(myForm)"> <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date" name="date" ngModel required> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> <mat-error *ngIf="myForm.controls.date.invalid && myForm.controls.date.touched">Please choose a date.</mat-error> </mat-form-field> <mat-form-field> <input matInput placeholder="First Name" name="firstName" ngModel required> <mat-error *ngIf="myForm.controls.firstName.invalid && myForm.controls.firstName.touched">Please enter a first name.</mat-error> </mat-form-field> <button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid">Submit</button> </form> 在我的 .ts 文件中，我有一个打开对话框的方法： @ViewChild('myForm', { static: true }) public myForm: ElementRef; public openDialog(): void { const dialogRef = this.dialog.open(FilterFormDialogComponent, { width: '460px', disableClose: true, autoFocus: false, panelClass: 'form-dialog', data: { form: this.myForm // reference to the form previously defined }, }); } 在我的filterFormDialogComponent中，我尝试使用ng-content在其html中可视化插入的表单。但是，我无法想象该表格。是否可以使用 MAT_DIALOG_DATA 将表单或其他组件传递到对话框中？如果是这样，如何将其正确显示到对话框的html中？您正在将 FormGroupDirective 传递到对话框。您可以尝试像这样在对话框数据中传递表单 form: this.ngForm.form

javascript angular dialog modal-dialog angular-reactive-forms

回答 1 投票 0

导航到同一页面后，无法订阅 NgOnInit 中可观察的表单控件 valueChanges

我有一个使用不同参数导航到自身的页面。这使得 NgOnInit 不会再次执行。可悲的是，在 NgOnInit 中，我订阅了一个可观察的对象来处理值变化，我...

angular rxjs angular2-routing angular-reactive-forms angular-observable

回答 1 投票 0

验证表单中是否至少填写了一个字段（复选框或其他文本字段），如果两者都为空，则在 Angular 中显示错误？

要验证表单中是否至少填写了一个字段（复选框或“otherText”字段），请为表单组创建一个自定义验证器。该验证器将检查是否在...

html angular forms frontend angular-reactive-forms

回答 1 投票 0

在可观察对象内创建的垫表内形成数组

我有一个父组件：父列表包含两个子组件（第一个子列表，第二个子列表）在第二个子列表组件中：我有一个 mat 表，用于接收要显示的数据...