angular-forms 相关问题

我在“表单”模块中创建了一个组件“表单页面”：表单页面.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 的一个组件。你必须先在你的模块中导入它。

html angular asp.net-core-webapi httpclient angular-forms

回答 2 投票 0

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>。（我希望你知道我的意思是什么按钮，因为我在特定的权限受限的手机上开发，我无法截取键盘的屏幕截图......）任何人都知道这是为什么，我该如何解决这个问题，或者如果有一个特定的按键可以听，在我的指令中使用这个而不是回车键？

android angular angular-forms controlvalueaccessor angular-controlvalueaccessor

回答 0 投票 0

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

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

angular angular-forms angular-reactive-forms debouncing

回答 8 投票 0

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

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

html angular typescript angular-forms ngmodel

回答 1 投票 0

无法删除 FormArray 中 FormGroup 内的动态验证器 - Angular

要在表单数组中的表单组内设置验证器，我尝试了此链接中描述的方法：无法在 FormArray 中的 FormGroup 内设置动态验证器 - Angular 我试过了，一个...

angular angular-reactive-forms angular-forms formarray formgroups

回答 1 投票 0

将焦点放在<input>元素上

我正在使用 Angular 5 开发一个前端应用程序，我需要隐藏一个搜索框，但是在单击一个按钮时，搜索框应该显示并聚焦。我尝试了几种方法发现...

angular angular5 angular-forms

回答 15 投票 0

角度传输状态隐含地包含组件状态——当我明确地只提供它页面数据时？

我目前正在尝试解决我目前遇到的 transferState 问题，并且当我提供的是从后端提供的 json 数据时，它会尝试序列化应用程序组件。 t...

angular angular-forms angular-transfer-state

回答 0 投票 0

Angular RxJS 键盘输入在输入或去抖动时间发出

我有一个搜索输入功能，我希望在用户按下回车键或去抖超时结束时调用该功能。基本上我想将这两条路径组合成一个 RxJS obse...

angular rxjs angular-forms

回答 1 投票 0

显示动态 FormControlNames 时找不到带路径的控件 - Angular Reactive Forms

我构建了一个响应式表单，该表单根据数据构建。 stackBlitz 演示在我的示例中，用户从中选择一个选项，这会触发一个（更改）方法，该方法获取 ... 我已经建立了一个反应形式，其中的形式建立依赖于数据。 stackBlitz 演示在我的示例中，用户从 <select> 中选择一个选项，这会触发一个 (change) 方法，该方法获取更多数据，这可能会通过 addControl 向表单添加更多字段。 <div formArrayName="fields"> <ng-container *ngFor="let item of fields; let i = index" formGroupName="linkTypeAttributeForm" >  <input [type]="item.dataType" [formControlName]="item.displayName" /> </ng-container> </div> 是否有更好的方法来构建此实现以允许我指定 type 并添加未知的 formControlName？任何帮助表示赞赏！我遇到错误Cannot find control with path: 'fields -> linkTypeAttributeForm ->问题。有人知道如何解决这个问题吗？ stackBlitz 演示你会想要改变： formGroupName="linkTypeAttributeForm" 到 [formGroup]="linkTypeAttributeForm" formGroupName 将用于嵌套的 FormGroup 始终具有固定名称，例如 const someForm = new FormGroup({ someControl: new FormControl(), someNestedFormGroup: new FormGroup({ someNestedControl: new FormControl() }) }) <form [formGroup]="someForm"> <ng-container formGroupName="someNestedFormGroup"> ... </ng-container> </form> 因为你的linkTypeAttributeForm实际上并没有嵌套在linkTypeForm里面，它实际上是它自己的顶级表单，所以它需要像其他顶级表单一样绑定到模板，例如通过[formGroup]

javascript angular angular-reactive-forms angular-forms

回答 0 投票 0

如何使用 *ngFor 为 Angular 中的 RadioButton 设置默认选中值

我正在根据数组的长度迭代单选按钮列表，并希望将选中的设置为仅第一个元素/输入字段的默认值我如何才能将一个字段设置为已选中并且

angular angular-forms

回答 4 投票 0

在角度中设置表单数组中字段的值

我有一个 Angular Material 步进器，它使用多种形式设置为一个数组，如下所示。当我在编辑模式下打开表单并注入要编辑的数据时，找不到正确的方法...

angular angular-material angular-forms angular-formbuilder

回答 1 投票 0

角形材料步进器与Mat-Select实现默认值。

我想在Angular材质的步进器中用垫子选择显示一个默认值。它不能与'formControlName'一起工作。