angular-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

ng-content 块和外部表单之间的引用 ngForm

我正在使用一个有 2 个元素的组件。在其中一个中，我注入了这样的表格：在另一个中，我有一些按钮，我想在其上使用 form.valid 和 form。我正在使用一个有 2 个元素的组件。在其中一个中，我注入了这样的表格： <form #form="ngForm"> 在另一个中，我想在其上使用 form.valid 和 form.pristine 的按钮，如下所示： <button [disabled]="!form.valid || form.pristine"> 这不起作用，因为按钮位于表单本身之外并且位于单独的 ng-content 元素中（该部分可能不相关）。我尝试过使用： @ViewChild('form') form!: ngForm 不幸的是，这最终是未定义的。谢谢！你是在正确的轨道上，我们可以只创建一个视图子级，但该值只会在ngAfterViewInit上设置，因此我们可以将对视图子级的引用存储在服务变量上，然后使用该变量来查找值在我们不相关的组件上创建服务： export class SomeService { refForm!: Form; } 表单所在组件中 @ViewChild('form', {static: false}) form!: ngForm; ... ... constructor(private someService: SomeService) {} ... ... ngAfterViewInit() { this.someService.refForm = this.form; } ... 最后，在您投影按钮内容的组件中在 TS 文件中添加 getter 方法，该方法将转发表单以进行检查 ... ... constructor(private someService: SomeService) {} ... ... get form() { return this.someService.refForm; } 组件 html（确保添加安全检查?.，这样如果表单未定义，就不会出现错误！） <button [disabled]="!form?.valid || form?.pristine">

angular angular-forms angular-content-projection

回答 1 投票 0

@for 在removeAt(index) 上的表单表现得很奇怪

编辑：稍微改进了 stackblitz，以便人们可以并排比较它。在 Angular 17+ 中，我想使用新的模板语法来迁移我的项目，这似乎有一个奇怪的行为......

angular angular-reactive-forms angular-forms

回答 1 投票 0

角度过滤器表单基于某些条件的数组控件

我面临一个问题，我想过滤 formArray 控件公共checklistForm！：FormGroup； this.checklistForm = this.fb.group({ checklistItems: this.fb.array([]) }); // 一些逻辑公开

angular typescript angular-forms

回答 1 投票 0

Angular 表单验证：显示空密码和不匹配密码的错误

我想执行表单验证。如果该字段是“脏”的。如果密码字段中没有任何内容，则应显示错误。如果密码不匹配，也会出现错误