forms 相关问题

在 Angular 中过滤表单数组

我有一个列表，我将其转换为 FormArray 以生成 html 中的按钮列表。我想按名称过滤汽车 CarComponent.html 我有一个列表，我将其转换为 FormArray 以生成 html 中的按钮列表。我想按名称过滤汽车 CarComponent.html <input #searchBox id="search-box" (input)="search(searchBox.value)" /> <form [formGroup]="form" *ngIf="showCars"> <input type="button" class ="btn" formArrayName="carsList" *ngFor="let car of carsList$ | async; let i = index" value="{{carsList[i].name}}" > </form> CarComponent.ts carsList$: Observable<Car[]>; private searchTerms = new Subject<string>(); search(term: string): void { this.searchTerms.next(term); } constructor(private formBuilder:FormBuilder,...) { this.form = this.formBuilder.group({ carsList: new FormArray([]) }); this.addButtons(); } ngOnInit() { this.spinner.show(); this.carsList$ = this.searchTerms.pipe( debounceTime(300), distinctUntilChanged(), switchMap((term:string)=> this.carsList ??? // Is this correct ?? What do I put here ? ) } private addButtons() { this.carsList.map((o,i)=>{ const control = new FormControl; (this.form.controls.carsList as FormArray).push(control); }) } export const CarsList: Car[] = [ { name: 'Mercedes' }, { name: 'BMW' }, { name: 'Porsche' }, { name: 'Cadillac' } ] 所以我想知道如何正确进行过滤，而不是出于性能原因使用管道。 出于性能原因，要在不使用管道的情况下过滤汽车列表，您可以直接过滤组件代码中的数组。 import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, FormArray } from '@angular/forms'; import { Observable, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; interface Car { name: string; } const CarsList: Car[] = [ { name: 'Mercedes' }, { name: 'BMW' }, { name: 'Porsche' }, { name: 'Cadillac' } ]; @Component({ selector: 'app-car', templateUrl: './car.component.html', styleUrls: ['./car.component.css'] }) export class CarComponent implements OnInit { form: FormGroup; carsList$: Observable<Car[]>; showCars = true; private searchTerms = new Subject<string>(); constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ carsList: new FormArray([]) }); } ngOnInit() { this.addButtons(); this.carsList$ = this.searchTerms.pipe( debounceTime(300), distinctUntilChanged(), switchMap((term: string) => { return this.filterCars(term); }) ); } private addButtons() { CarsList.forEach((car: Car) => { const control = new FormControl(); (this.form.controls.carsList as FormArray).push(control); }); } private filterCars(term: string): Observable<Car[]> { const filteredCars = CarsList.filter((car: Car) => car.name.toLowerCase().includes(term.toLowerCase()) ); return new Observable<Car[]>(subscriber => { subscriber.next(filteredCars); subscriber.complete(); }); } search(term: string): void { this.searchTerms.next(term); } } 在上面的代码中，我们删除了 carsList observable，而是直接使用 CarsList 数组。然后实现 filterCars 方法来根据搜索词过滤汽车。在 ngOnInit 中，我调用 addButtons 用每辆车的按钮填充表单数组。并且 search 方法用于当用户在搜索框中输入文本时触发搜索。

调用removeEventListener不起作用

我不明白为什么removeEventListner()在我的代码中不起作用。 下面是我的代码，带有简化的名称等： const form = document.querySelector(".formclass") 函数执行用户...

渲染和捕获表单数据的问题..REACT

我遇到了问题。我创建了一个表单，当我单击 index.tsx 文件中的添加按钮时，它没有添加。但是，当我尝试渲染虚拟产品列表时，它起作用了。让我分享...

带有其他选项的单选按钮

我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项。 我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项。 <p> <label for="favFruit"><b>What's your favorite fruit</b></label> <br /> <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" /> Apple <br /> <input type="radio" value="Banana" id="favFruit" name="favFruit" formControlName="favFruit" /> Banana <br /> <input type="radio" value="Orange" id="favFruit" name="favFruit" formControlName="favFruit" /> Orange <br /> <input type="radio" value="Pear" id="favFruit" name="favFruit" formControlName="favFruit" /> Pear <br /> <input type="radio" value="Grapes" id="favFruit" name="favFruit" formControlName="favFruit" /> Grapes <br /> <input type="text" value="" id="favFruit" name="favFruit" formControlName="favFruit" /> </p> 我尝试过添加另一个值作为文本输入字段，但是，这允许用户选择多个选项。我希望当用户单击“其他”（选项）时弹出，以便用户可以选择其他，但这将是他们唯一的选择。 我建议用于填充其他值的 <input> 元素不要使用 formControlName 指令。 当输入文本字段时，它应该更新 favFruit 控制值，这会导致取消选中之前选中的单选按钮。 <input type="text" value="" id="favFruit" name="favFruit" #otherFavFruit (input)="onOtherFavFruitInput(otherFavFruit.value)"> onOtherFavFruitInput(value: string) { this.form.controls.favFruit.setValue(value); } 另一种情况是，当您在文本字段中输入其他值时，您改变主意并选择其中一个单选按钮，您可以使用 (change) 事件来重置输入字段。 <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> import { Component, ElementRef, ViewChild } from '@angular/core'; @ViewChild('otherFavFruit') otherFavFruit!: ElementRef<HTMLInputElement>; onFavFruitChecked(event: any) { this.otherFavFruit.nativeElement.value = ''; } 请注意，您可以使用 *ngFor 生成一组表单控件，旨在减少 HTML 中的代码。 <ng-container *ngFor="let fruit of fruits"> <input type="radio" [value]="fruit" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> {{ fruit }} <br> </ng-container> fruits = ['Apple', 'Banana', 'Orange', 'Pear', 'Grapes']; 演示@StackBlitz

删除按钮后表单元素不执行提交

单击按钮时，单击事件会冒泡以形成并执行正确的回调。但是，删除按钮后，不会触发表单提交事件。我无法确切地找到为什么会发生这种情况...

添加表单标签并提交常量后页面不再显示

在添加表单和导航元素之前，页面显示得足够好。没有错误，但数据不再随反应应用程序显示 刚接触 Reactjs 有一个工作（很好的页面显示

Elementor Pro Form Widget 提交返回解析器错误

我为 Elementor Pro 表单创建了一个 WordPress 插件，它将捕获表单提交数据并将该数据发送到其他数据库，然后继续并将响应保存在 elementor 表单提交中......

只读复选框为true，发布没有隐藏字段的数据

上下文： 在 FormAssembly 中创建的表单。表单已构建，并围绕此复选框值构建了广泛的连接器和逻辑，以及有条件显示的部分/字段。 客户...

我可以阻止 Devextreme Angular DataGrid 表单中的 Enter 键提交表单吗？

我的应用程序中有一个复杂的 DataGrid 表单，其中包含许多不同的字段，包括文本区域。每当我尝试在任何文本相关字段上按 Enter 时，表单都会尝试提交，然后...

根据之前的输入过滤 html 表单选项

我会在这个问题之前说我不是在这里寻找代码，只是在我付出巨大努力之前表明我的方法是否正确。这就是为什么我看起来还没有...

为什么发送post请求后需要重定向？

页面上有 3 个用于更新数据的表格：第一个用于用户个人资料，第二个用于重置密码，第三个用于更改电子邮件。我将表单发送到控制器并重定向到同一页面。项目...

无法发布/contact.php

我的网站上有联系表单，但收到“无法 POST /contact.php”错误。 这是我在 html 页面上的表单： 我的网站上有联系表单，但收到“无法 POST /contact.php”错误。 这是我在 html 页面的表单： <form role="form" action="contact.php" method="post"> <div class="form-group"> <label for="InputName">Nom</label> <div class="input-group"> <input type="text" class="form-control" name="name" id="InputName" placeholder="Nom" required> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div> </div> <div class="form-group"> <label for="InputEmail">Email</label> <div class="input-group"> <input type="email" class="form-control" id="InputEmail" name="email" placeholder="Email" required> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div> </div> <div class="form-group"> <label for="InputEmail">Sujet</label> <div class="input-group"> <input type="text" class="form-control" id="InputEmail" name="subject" placeholder="Sujet" required> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div> </div> <div class="form-group"> <label for="InputMessage">Message</label> <div class="input-group"> <textarea name="message" id="InputMessage" class="form-control" rows="5" required></textarea> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div> </div> <div class="form-group"> <label for="InputReal">5 + 10? (Spam Checker)</label> <div class="input-group"> <input type="text" name="human" class="form-control" name="InputReal" id="InputReal" required> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div> </div> <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-left"> </form> 然后我尝试了我的 PHP 代码（contact.php）。不知道是不是有什么问题，因为我PHP很差： <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $to = '[email protected]'; $subject = $_POST['subject']; $human = $_POST['human']; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; if ($_POST['submit'] && $human == '15') { if (mail($to, $subject, $body)) { echo '<p>Your message has been sent!</p>'; } else { echo '<p>Something went wrong, go back and try again!</p>'; } } else if ($_POST['submit'] && $human != '15') { echo '<p>You answered the anti-spam question incorrectly!</p>'; } ?> 如果任何了解 PHP 的人都可以提供帮助，那就太棒了。 提前致谢。 正如Sakthi Karthik所说，你需要检查contact.php的目录/路径。 您还应该检查的情况： if(isset($_POST['submit'] && $human == '15') 同样： else if(isset($_POST['submit'] && $human != '15') 确保您正在 XAMP/htdocs/“您的项目文件夹”/contact.php 中运行网页 PHP是服务器端语言，需要在服务器上运行。 启动 XAMPP 并确保 Apache 和 MySQL 已启动并正在运行。 确保同一文件夹中是否有 contact.php 文件。 您缺少标签 </form> 这个问题解决了吗？ 我有同样的问题，将 php 文件放在同一文件夹中并不能解决问题。

如何在Django中发送确认邮件和预定邮件

我正在开发一个涉及自定义用户注册表单的 Django 项目。我的目标是在提交表单时实施两步电子邮件通知流程： 立即电子邮件确认：自动...

引用 page.tsx 中的组件时，类型“{}”缺少类型中的以下属性

我有一个表单“Userform”，在 page.tsx (next.js) 中，它引用了用户表单。但是在 page.tsx 中，它显示错误 - 类型“{}”缺少类型“UserFor...

我无法从控制器 Rails 7 渲染部分 js

我已经创建了 my_portfolio.html.erb ，并将表单提交给带有远程控制器的控制器： true ，控制器接受参数并验证一切都可以在条件和代码下正常工作，但它可以'...

将输入元素与表单中的某些按钮相关联？

http://jsfiddle.net/EGjc9/ 我在页面上有几个 元素，我需要将距离它们最近的 元素与这些按钮关联起来。现在，当您在任意位置按 ENTER 键时... http://jsfiddle.net/EGjc9/ 我在页面上有几个 <button> 元素，我需要将距离它们最近的 <input> 元素与这些按钮关联起来。现在，当您在任何输入字段上点击 ENTER 时，它会触发表单中的第一个 <button>。我该如何改变这个？ DOM： <form action="irrelevant"> <div> <select><option>1</option><option>2</option><option>3</option></select> <input type='text'/> <button>Hello</button> </div> <div> <select><option>1</option><option>2</option><option>3</option></select> <input type='text'/> <button>Hello</button> </div> <div> <select><option>1</option><option>2</option><option>3</option></select> <input type='text'/> <button>Hello</button> </div> <div> <select><option>1</option><option>2</option><option>3</option></select> <input type='text'/> <button>Hello</button> </div> </form> DOM 就绪： $('button').click( function(){ $(this).siblings().filter('select').val('3'); return false; }); 您需要使用 KeyPress 事件来捕获按下的“Enter”键，然后使用 JavaScript 按下您想要的按钮。 例如： //some key is pressed $('input').keypress( function(event){ //is this "Enter"? if (event.key === 'Enter') { //finding the button inside the same <div> and clicking on it $(this).parent().find('button').click(); //we don't need a default action event.preventDefault(); } }); 类似这样的： $('input').bind('keypress', function(e){ if(e.which == 13) { //Enter keycode $(this).next().click() } return false; }); 小提琴

React Hook Form - 当状态脏时值属性消失了

我正在使用react-hook-form来管理表单状态。 但是当我开始在文本字段中输入时，devtool 中显示的 value 属性消失了。 用户界面初始状态。 如上面的截图所示，va...

您可以更改默认表单验证消息的区域设置吗？

有没有办法更改默认表单验证消息的区域设置，以便无论浏览器的语言如何，它们始终以英语显示。 我不想通过

如何显示“创建”和“编辑”操作表单的特定字段 - Symfony3

我有一个简单的 FormType 附加到一个名为 media 的实体，我在视图中呈现该实体。 我有一个 newAction 可以让我创建对象，还有一个 editAction 可以让我用相同的形式编辑它......

React PreventDefault 函数不会停止重新加载表单页面

我正在创建一个 React 上下文来解码 jwts 并管理用户的登录功能。后端是使用django编写的。 <<<<< Login.jsx >>>>> 导入 React, { useContext ...