angular-forms 相关问题

在我的模板中创建可访问的属性以进行表单验证（在 Angular 中）的正确方法是什么？

上下文： 我有一个 Angular 的 LoginFormComponent 。在此组件中，我有一个包含 2 个属性的表单：电子邮件和密码。我想要实现的是在这个组件中创建属性......

如何将表单控件错误消息从组件传递到在 Angular 中实现 ControlValueAccessor 的子组件？

现在我使用 @Input() 将错误消息从父组件传递到实现 ControlValueAccessor 的子组件。我想知道是否有更好的方法来传递错误消息。请各位...

angular FormControl中如何限制显示的小数位数？

我看到大量的自定义代码来手动修改值或初始值，但是在角度反应形式中是否有任何本地方式来配置数字在输入中的显示方式？ 无需修改...

如何正确应对 Angular FormGroup 的变化？

与我作为例子看到的其他表单或我项目中的其他表单不同，我需要在没有任何提交操作的情况下对更改做出反应，并即时将新值应用到我的应用程序。 this.form.get('my_input').

(ngModel) 语法是如何显式工作的？

我正在尝试了解 ngModel 指令在 Angular 中的工作方式。我遇到了这行简单的代码，这对我来说完全没有意义，我将解释原因： 我想了解 ngModel 指令在 Angular 中是如何工作的。我遇到了这行简单的代码，这对我来说完全没有意义，我将解释原因： <input (ngModel)="userName" /> 对我来说，“(ngModel)”语法意味着我们正在监听任何名为“ngModel”的Output事件。我这样说是因为这是我从 Angular 文档中的“@Output”组件通信中学到的。也就是说，使用“()”语法，我们通常应该在输出发出名为“ngModel”的事件时应用 JavaScript 指令。 所以我们通常应该写(ngModel)="do something()"而不是(ngModel)="userName" 所以我在这里不明白的是(ngModel)="userName"，userName不是指令，它是我的组件类中的一个字段：它对我来说没有意义......除了ngModel指令如何设置它自己的@Input ngModel 属性，因为我们不使用“[]”语法，这意味着 @Input 不会跟踪我们输入的变化

移动浏览器中的验证文本字段不起作用

移动浏览器中的文本框验证不适用于我的 Angular 应用程序 移动浏览器：Chrome、Samsung 浏览器（不适用于这两种浏览器） 仅在文本字段中需要 0 到 9 和 A 到 Z 我...

是否有一种使用强类型表单的简洁方法？

如果我有一个表格： const form = new FormGroup({ foo: 新的 FormControl(''), }); 我想动态地添加一个控件，比如： form.addControl('bar', new FormControl('')); 我收到一个错误

Angular2 - 无法动态更改输入类型

我想知道是否有人可以帮助解释为什么我无法动态更改表单输入类型？ 例如 没有

Angular Reactive Form - 如何定位嵌套在数组和对象中的表单控件

我是 Angular 的新手，我正在尝试为我一直在构建的食品配送系统构建一个相当复杂的表单。 我目前正在构建一个表单，使我能够将菜单项添加到

Angular PUT 404（未找到）在我更新用户时不起作用

当我尝试更新用户时，出现服务器错误，我的应用程序崩溃了，我必须重新开始。这是我在浏览器端看到的错误： 这是我的 TS 文件： 导入{定位...

无法在 Angular 14 上的 ngFor 中更改输入类型=颜色的值

下面的代码在角度 ^14.2.0 中有一个非常奇怪的行为。我无法在第一种形式中更改颜色选择器的输入值，但它在第二种形式中工作得很好。所有其他......

在 Angular PUT 本地主机 404 中获取服务器错误未找到

当我尝试创建或更新用户时，出现服务器错误并且我的应用程序崩溃，我必须重新开始。这是我在浏览器端看到的错误： 这是我的 TS 文件： 进口...

Angular 13：反应式表单控件输入屏蔽

我正在尝试以反应形式输入电话号码字段，并使用格式化指令将电话号码格式化为这种格式 (123) 456-7890。 示例链接： https://stackblitz.co...

如何从子表单本身中删除嵌套的子表单？

我有一个包含 formArray 的父表单，我可以在单击调用 addForm() 的按钮时动态附加额外的 formGroups： ngOnInit() { this.signupForm = this.formBuilder.g ...

如何使用输入和 FormControl 创建过滤器？

我创建了一个根据用户输入的内容过滤和显示数据的输入，但我遇到了两个问题： 我只能使用 ngModel 来做，这个模型在 Angular 11 中被弃用了。 ...

Angular Forms：当我更新产品时，前端不显示图像

我正在做一个教程，我已经达到了可以无缝创建产品的部分，但是当我去更新同一个产品时，图像没有更新，即使我不改变它，它也出现了 bla ...

How to post selected checkboxes as an array from angular to api

我在“表单”模块中创建了一个组件“表单页面”： 表单页面.component.html： ... 我在“表单”模块中创建了一个组件“表单页面”： form-page.component.html: <form [formGroup]="form" (submit)="onSubmit()"> <div> <label for="carmodel">Car Model:</label> <input type="text" class="form-control" formControlName="carmodel"> <div *ngIf="form.controls['carmodel'].touched && form.controls['carmodel'].errors"> <div *ngIf="form.controls['carmodel'].hasError('required')" class="error">Carmodel is required.</div> <div *ngIf="form.controls['carmodel'].hasError('minlength')">Carmodel should be minimum 3 characters.</div> </div> </div> <div> <label for="carnum">Car Number:</label> <input type="text" class="form-control" formControlName="carnum"> <div *ngIf="form.controls['carnum'].touched && form.controls['carnum'].errors"> <div *ngIf="form.controls['carnum'].hasError('required')" class="error">carnum is required.</div> </div> </div> <div> <label for="contactNumber">Contact Number:</label> <input type="text" class="form-control" formControlName="contactNumber"> <div *ngIf="form.controls['contactNumber'].touched && form.controls['contactNumber'].errors"> <div *ngIf="form.controls['contactNumber'].hasError('required')" class="error">Contact number is required.</div> </div> </div> <div> <label>Type of Service:</label> <div> <label><input type="radio" name="option" value="Waterwash" formControlName="option"> Waterwash </label> </div> <div> <label><input type="radio" name="option" value="Fullservice" formControlName="option"> Fullservice </label> </div> <div *ngIf="form.controls['option'].touched && form.controls['option'].invalid"> <div class="error">Please select an option</div> </div> </div> <div> <label>Addons:</label> <div> <label><input type="checkbox" value="10%off First service visit" formControlName="checkbox"> 10%off First service visit</label> </div> <div> <label><input type="checkbox" value="10%off Waterwash" formControlName="checkbox"> 10%off Waterwash</label> </div> <div> <label><input type="checkbox" value="Free AC Inspection" formControlName="checkbox"> Free AC Inspection</label> </div> <div *ngIf="form.controls['checkbox'].touched && form.controls['checkbox'].invalid"> <div class="error">Please select at least one Addon</div> </div> </div> <div> <label>State:</label> <select formControlName="state" (change)="onStateChange()"> <option *ngFor="let state of states" [value]="state">{{state}}</option> </select> <div *ngIf="form.controls['state'].touched && form.controls['state'].invalid"> <div class="error">Please select a state</div> </div> </div> <div> <label>City:</label> <select formControlName="city"> <option *ngFor="let city of cities[form.controls['state'].value]" [value]="city">{{city}}</option> </select> <div *ngIf="form.controls['city'].touched && form.controls['city'].invalid"> <div class="error">Please select a city</div> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> <button type="button" (click)="Reset()">Reset</button> <button (click)="goBack()">back</button> </form> form-page.component.ts: import { Component } from '@angular/core'; import { Location } from '@angular/common'; // import { FormGroup, FormBuilder, Validators } from '@angular/forms'; // import { CarServiceService } from 'src/app/services/car-service.service'; @Component({ selector: 'app-form-page', templateUrl: './form-page.component.html', styleUrls: ['./form-page.component.css'] }) export class FormPageComponent { form: FormGroup; states: string[] = ['Tamilnadu', 'Kerala', 'Karnataka','Maharastra']; cities: {[key: string]: string[]} = { 'Tamilnadu': ['Chennai', 'Coimbatore','Madurai'], 'Kerala': ['Trivandrum','Kochi','Kollam'], 'Karnataka': ['Bangalore', 'Mysore'], 'Maharastra': ['Mumbai', 'Pune'] }; constructor(private fb: FormBuilder,private location : Location,private carServiceService :CarServiceService) { this.form = this.fb.group({ carmodel :['', [Validators.required, Validators.minLength(3)]], carnum :['', [Validators.required]], contactNumber: ['', [Validators.required, Validators.pattern(/^\d{10}$/)]], option: ['', Validators.required], checkbox: ['', Validators.required], state: ['', Validators.required], city: ['', Validators.required] }); } goBack():void{ this.location.back(); } onSubmit() { if (this.form.valid) { this.carServiceService.addCar(this.form.value).subscribe(response =>{ console.log(response); }); } else { // Form is invalid, display error messages this.form.markAllAsTouched(); } } Reset(){ this.form.reset(); } onStateChange() { const state = this.form.controls['state'].value; this.form.controls['city'].setValue(''); if (state) { this.form.controls['city'].enable(); } else { this.form.controls['city'].disable(); } } // } 为 POST 创建了一个名为“car-service”的服务： 汽车服务.service.ts： import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class CarServiceService { constructor(private http: HttpClient) { } addCar(formData : any): Observable<any>{ return this.http.post<any>('https://localhost:7095/api/Forms/submit-form',formData); } } 我正在尝试将表单值发布到 API。当我点击提交时，出现错误 400。 POST https://localhost:7095/api/Forms/submit-form 400 错误： ERROR HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: 'OK', url: 'https://localhost:7095/api/Forms/submit-form', ok: false, …}error: {type: 'https://tools.ietf.org/html/rfc7231#section-6.5.1', title: 'One or more validation errors occurred.', status: 400, traceId: '00-88c37085e17ce434f174cf65d020c28e-1bd09d34125cb2dc-00', errors: {…}}headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure response for https://localhost:7095/api/Forms/submit-form: 400 OK"name: "HttpErrorResponse"ok: falsestatus: 400statusText: "OK"url: "https://localhost:7095/api/Forms/submit-form"[[Prototype]]: 在 asp.net-core web API 中： FormData.cs: namespace AngularApi.Model { public class FormData { public string Carmodel { get; set; } public string Carnum { get; set; } public string ContactNumber { get; set; } public string Option { get; set; } public List<string> Checkbox { get; set; } public string State { get; set; } public string City { get; set; } } } 这是我在 API 中的 FormController： private static List<FormData> formsDataList = new List<FormData>(); [HttpPost("submit-form")] public IActionResult SubmitForm([FromBody] FormData formData) { // process the form data string carmodel = formData.Carmodel; string carnum = formData.Carnum; string contactNumber = formData.ContactNumber; string option = formData.Option; List<string> checkbox = formData.Checkbox; string state = formData.State; string city = formData.City; // validate the form data // if (string.IsNullOrWhiteSpace(carmodel) || string.IsNullOrWhiteSpace(carnum) || string.IsNullOrWhiteSpace(contactNumber) || string.IsNullOrWhiteSpace(option) || checkbox == null || checkbox.Count == 0 || string.IsNullOrWhiteSpace(state) || string.IsNullOrWhiteSpace(city)) // { // return BadRequest(new { Message = " Enter the required fields." }); // } formsDataList.Add(formData); // return Ok(new { Message = "Form submitted successfully." }); return Ok(formData); } 输入甚至没有命中 API。所以我怀疑问题出在 HTTPClient 和复选框上。我想问题出在复选框上。因为如果我从 HTML 表单和 API 中完全删除复选框字段，它会完美地工作并且我能够将值发布到 API。 有人可以告诉我如何解决这个问题。 如果你记录表单值，你会得到这个： carmodel: "kia" ​carnum: "123" ​checkbox: true ​city: "Chennai" ​contactNumber: "456" ​option: "Waterwash" state: "Tamilnadu" 我想你也看到了问题。布尔值不是字符串列表。除此之外，您还为所有三个选项指定了相同的控件名称。 你可以f。 e.使用字符串数组或更好的 FormArray 并使用 ngFor. 生成复选框 首先我定义了复选框值： checkboxes = [ { value: '10%off First service visit', name: '10%off First service visit' }, { value: '10%off Waterwash', name: '10%off Waterwash' }, { value: 'Free AC Inspection', name: 'Free AC Inspection' }, ]; 顺便说一下，将值作为字符串对我来说有点不常见。我的意思是，您宁愿将 id 存储在数据库中。但无论如何。 然后在表单生成器中使用FormArray checkbox: new FormArray([], Validators.required) 并为它创建一个吸气剂 get checkboxesFormArray() { return this.form.controls['checkbox'] as FormArray; } 在那之后填充它 addCheckboxes() { this.checkboxes.forEach(() => this.checkboxesFormArray.push(new FormControl('')) ); } 并添加一个事件处理器来处理checked change事件 checkedChanged(e) { let index = this.checkboxes.findIndex( (item) => item.value === e.target.value ); if (e.target.checked) { this.checkboxesFormArray.controls[index].setValue(e.target.value); } else { this.checkboxesFormArray.controls[index].setValue(''); } } 这是设置 appr 所必需的。控制值到所选字符串。 这就是模板的样子 <div> <label>Addons:</label> <div *ngFor="let cbx of checkboxesFormArray.controls; let i = index"> <label formArrayName="checkbox"> <input type="checkbox" [formControlName]="i" (change)="checkedChanged($event)" [value]="checkboxes[i].value"> {{checkboxes[i].name}} </label> </div> </div> 并且 here 你可以找到一个有效的 stackblitz 演示。 如果这是您要找的，请将其标记为答案。 代替<input type=checkbox>，您可以尝试使用<mat-selection-list>。 将始终返回布尔值。它将返回所选值的数组。 代码将是： <mat-selection-list formControlName="checkbox"> <mat-list-option value="10%off First service visit"> 10%off First service visit</mat-list-option> <mat-list-option value="10%off Waterwash" 10%off Waterwash</label></mat- list-option> <mat-list-option value="Free AC Inspection"> Free AC Inspection</mat- list-option> </mat-selection-list> 注意：MatSelectionList 是 Angular Material 的一个组件。你必须先在你的模块中导入它。

Android 上的 Angular：“下一步”按钮未聚焦自定义 ControlValueAccessor

我有一个角度应用程序，它经常使用自定义 CVA。 大多数表格看起来像这样： 我有一个角度应用程序，它经常使用自定义 CVA。 大多数表格看起来像这样： <form [formGroup]="something" (ngSubmit)="submit()" appEnterTab> <CVA1 formControlName="SomeControl"></CVA1> <CVA2 formControlName="SomeOtherControl"></CVA2> <mat-form-field> <mat-label>Something</mat-label> <input formControlName="aThirdControl" /> </mat-form-field> </form> 一个简单的 CVA（在我的例子中是 CVA2）看起来像这样 <form [formGroup]="form"> <mat-form-field> <mat-label>Quantity</mat-label> <input formControlName="Quantity" type="number" [... event bindings and such]/> <mat-error *ngIf="...">Some Error</mat-error> </mat-form-field> </form> 在 PC 上，一切或多或少都按预期工作：使用 Tab 聚焦下一个 UI 元素。 我得到了一个指令 (appEnterTab)，它将下一个输入集中在 keyDown.Enter 上，它也像一个魅力但是： 在 Android 上，键盘显示的不是“确定”按钮，而是“下一步”按钮，它会跳过 CVA 输入并聚焦主窗体中的下一个<input>。 （我希望你知道我的意思是什么按钮，因为我在特定的权限受限的手机上开发，我无法截取键盘的屏幕截图......） 任何人都知道这是为什么，我该如何解决这个问题，或者如果有一个特定的按键可以听，在我的指令中使用这个而不是回车键？

Angular Reactive Forms：仅去抖某些特定的表单控件

我有一个简单的搜索组件，它包含一个带有 2 个元素的反应式表单： 文本输入（搜索任意匹配文本） 复选框（包括/排除已删除的结果） 到目前为止我用

如何在 Angular 13 中使用 ngModel 进行双向绑定

我只是想从输入元素中获取用户输入并将其保存在变量中。 这是我的组件打字稿的样子： 导出类 MyComponent { 用户输入：字符串=''； } T...