angular-forms 相关问题

与Angular模板或反应形式相关的问题。

删除 *ngFor 中使用的 FormArray 项目会引发错误

在《学习Angular不废话》一书中，有一个我尝试改进的如何使用FormArray的例子。这个示例使用基于包含产品的购物车的动态表单，我尝试...

angular angular-forms

回答 1 投票 0

删除 *ngFor 中使用的 FormArray 项目会引发错误

在《学习Angular不废话》一书中，有一个我尝试改进的如何使用FormArray的例子。这个示例使用基于包含产品的购物车的动态表单，我尝试...

angular angular-forms

回答 1 投票 0

如何更改<input type="color">的默认颜色？

我正在使用 Angular，想要更改元素的默认颜色。目前，它默认显示黑色（#000），但我想将其设置为不同的颜色...

html angular input angular-forms ngmodel

回答 2 投票 0

在任何用户交互之前显示 mat-form-field 验证消息

这是参考代码，输入报价名称这是参考代码， <div> <mat-form-field class="w-100 mt-2" appearance="outline"> <mat-label>Enter a name for your quote</mat-label> <input #quoteName matInput placeholder="Enter a name for your quote" formControlName="quoteName" [maxlength]="40" (input)="onQuoteNameInput($event)" /> <mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint> <mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required">Quote Name is required.</mat-error> </mat-form-field> </div> 在上面的代码中，我使用 Touched 属性来控制错误消息的显示，因此我可以根据需要成功显示或隐藏它们。但是，表单加载后，输入字段的轮廓边框仍然显示为红色。如何防止最初出现红色轮廓？除了触摸状态之外，还添加了 mat-form-field-invalid 类检查： <mat-form-field class="w-100 mt-2" appearance="outline" [class.mat-form-field-invalid]="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors"> 或者，您可以在 CSS 中使用 Angular 的内置 ng-valid 和 ng-invalid 类以及触摸状态： .mat-form-field { &.ng-invalid.ng-untouched { // Override the default error styles when untouched .mat-form-field-outline { color: rgba(0,0,0,0.12) !important; // Default outline color } } } 您还可以将表单控件初始化为 null 而不是空字符串，以防止立即验证： this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: [null, Validators.required] }); 另一种方法是使用 updateOn: 'blur' 推迟验证，直到字段失去焦点： this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: ['', { validators: Validators.required, updateOn: 'blur' }] }); 最稳健的解决方案是结合方法 1 和 3。这是完整的代码： // Component class export class QuoteComponent implements OnInit { quoteDetailsFormGroup: FormGroup; constructor(private formBuilder: FormBuilder) { this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: [null, Validators.required] }); } } <div> <mat-form-field class="w-100 mt-2" appearance="outline" [class.mat-form-field-invalid]="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors"> <mat-label>Enter a name for your quote</mat-label> <input #quoteName matInput placeholder="Enter a name for your quote" formControlName="quoteName" [maxlength]="40" (input)="onQuoteNameInput($event)" /> <mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint> <mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required"> Quote Name is required. </mat-error> </mat-form-field> </div> 它将使用 null 初始化表单控件仅当字段被触摸且有错误时才显示红色轮廓

angular typescript angular-material angular-forms mat-form-field

回答 1 投票 0

ControlValueAccessor 在表单字段复选框中使用实现的格式和解析器，但输入数据正在更改，它不反映复选框

一个 TrueFalseValueComponent 用于如果选中复选框，我将得到 1，如果选中为 false，我将得到 0。例如，我选择了第一条记录选择值 0。现在未选中复选框。 ...

angular angular-directive angular-forms angular17

回答 1 投票 0

Angular 的格式化程序和解析器、ng-true-value 和 ng-false-value 指令变得可行

目前我创建了两个项目指令。但是一个指令用于如果复选框被选中，我将得到 1，如果选中为 false，我将得到 0。另一个指令用于转换值...

angular angular-directive angular-forms angular-template-form

回答 1 投票 0

验证器不是角度中的函数

我创建了自己的指令，用于添加验证和删除基于验证的指令输入参数。加载和表单字段值更改验证器不起作用时出现错误...