正文 

当前位置： 首页 > 知识 >

为啥这种带有动态输入值的表单验证不起作用？

     2023-03-13     68

关键词：

【中文标题】为啥这种带有动态输入值的表单验证不起作用？【英文标题】：Why is this form validation with dynamic input values not working?为什么这种带有动态输入值的表单验证不起作用？ 【发布时间】：2020-04-02 18:21:03 【问题描述】：

刚开始练习 angular... 我已经制作了一个反应形式（在父组件中），其值由子组件动态填充。 提交此表单时会保存空值，因为尽管值在输入字段中可见，但表单并未检测到这些值。

注意：输入值显示在父组件中（子到父通信成功）

这里是必要的代码：

子组件-ts文件

@Output() messageToEmit = new EventEmitter<string>();
@Output() messageToEmit1 = new EventEmitter<string>();
@Output() messageToEmit2 = new EventEmitter<string>();
@Output() messageToEmit3 = new EventEmitter<string>();

save(selectedItem: any, index: number)

var num1 = selectedItem.f;
var num2 = selectedItem.l;
var num3 = selectedItem.e;
var num4 = selectedItem.p;

this.messageToEmit.emit(num1);
this.messageToEmit1.emit(num2);
this.messageToEmit2.emit(num3);
this.messageToEmit3.emit(num4);

子组件 - html 文件

  <table class="w3-table-all">
<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
    <th>Password</th>
     <th>Edit / Update</th>
  </tr>
 </thead>
<tr *ngFor="let thing of things; let i = index;">   
  <td><input type="text" value="thing.f" id=" 'f' + i "> </td>
  <td><input type="text" value="thing.l"  id=" 'l' + i "> </td>
  <td><input type="text" value="thing.e"  id=" 'u' + i "> </td>
  <td><input type="text" value="thing.p"  id=" 'p' + i "> </td>
  <td >
    <button (click) = "save(thing,i)">Edit</button>
    </td>
  </tr> 
  </table>

父组件 - ts 文件

export class ParentComponent implements OnInit 
edited_values: string;
edited_values1: string;
edited_values2: string;
edited_values3: string;
edited_values4:  number;

name = 'Registration';
signupForm:FormGroup;
FirstName:string = "";
LastName:string = "";
Email:string = "";
Password:string = "";

constructor(
private frmbuilder: FormBuilder,
)

this.signupForm= frmbuilder.group(
fname:new FormControl('', [
Validators.required,
Validators.maxLength(50),
Validators.minLength(3),
Validators.pattern('^[a-zA-Z ]*$')
]),
lname:new FormControl('', [
Validators.required,
Validators.maxLength(50),
Validators.minLength(3),
Validators.pattern('^[a-zA-Z ]*$')
]),
 email:['',[Validators.required,Validators.email]],
userpassword:new FormControl('', [
Validators.required,
Validators.maxLength(50)
])
);
 
ngOnInit()


postdata(signupForm:any)

this.FirstName=signupForm.controls.fname.value;
this.LastName=signupForm.controls.lname.value;
this.Email=signupForm.controls.email.value;
this.Password=signupForm.controls.userpassword.value;

this.signupForm.reset();


getMessage(message: string) 
this.edited_values = message;

getMessage1(message1: string) 
this.edited_values1 = message1;

getMessage2(message2: string) 
this.edited_values2 = message2;

getMessage3(message3: string) 
this.edited_values3 = message3;
 
reset()
this.signupForm.reset();

父组件-html文件

<form id="contact" [formGroup]='signupForm' (ngSubmit)="postdata(signupForm)">
<h3> Register Now! </h3>  
<div class = "form-group">
  <input type="text" formControlName='fname' placeholder="your First name" value=edited_values>
</div>
<div *ngIf="signupForm.controls.fname.invalid && signupForm.controls.fname.touched">
<small> Enter name please (only letters)!  </small>
</div>
<br>
<div class = "form-group"> 
<input type="text" formControlName='lname' placeholder="your Last name"
value=edited_values1>
</div>
<div *ngIf="signupForm.controls.lname.invalid && signupForm.controls.lname.touched">
<small> Enter name please (only letters)!  </small>
</div>
<br>
<div class = "form-group">
<input type="text" formControlName='email' placeholder="your Email id"
value=edited_values2>
</div>
<div *ngIf="signupForm.controls.email.invalid && signupForm.controls.email.touched">
<small>  Email is invalid  </small>
</div>
<br>
<div class = "form-group">
<input type="Password" formControlName='userpassword' placeholder="your password"
value=edited_values3>
</div>
<div *ngIf="signupForm.controls.userpassword.invalid && signupForm.controls.userpassword.touched">
<small> Must enter password in correct format: min 8 characters, at least 1 uppercase, 1 lowercase, 
1 number, 1 special:  </small>
</div>
  <br>
    <div>      
   <button type="submit" > Submit </button>
   <button type="reset" (click) = "reset()"> Reset </button>
 </div>
 </form>
 </div>
 <app-edit 
 (messageToEmit)="getMessage($event)"
 (messageToEmit1)="getMessage1($event)"
 (messageToEmit2)="getMessage2($event)"
 (messageToEmit3)="getMessage3($event)"
 (messageToEmit4)="getMessage4($event)" 
 ></app-edit>

【问题讨论】：

你没有在你的父母中做任何事情来设置任何表单值？ @MikeOne 我正在使用子组件作为父组件。通信。在父组件 html- 内的输入标签中，值由 内的数据绑定设置。此 html 文件中的最后几行也接收来自子组件的值 值仅用于初始设置。我认为您可能需要重新考虑一下。 你想要的其实很简单，也可以在没有所有不同的事件处理程序的情况下完成.. @MikeOne 实际上我在这里放的只是必要的代码，可能看起来像初始设置。实际上，每次单击按钮时，这些值都来自子组件。我的问题是，这个表单没有检测到动态绑定的值。 【参考方案1】：

@ASHISH，当您使用 ReactiveForms 时，不使用 [value]，在输入中，它只是 formControlName

<!---WRONG--->
<input type="text" formControlName='fname' placeholder="your First name" value=edited_values>

<!--OK-->
<input type="text" formControlName='fname' placeholder="your First name" >

您需要使用“方法”setValue 更改值，因此您的函数 getMessage 必须像

getMessage(message: string) 
   this.signupForm.get('fname').setValue(message)

【讨论】：

输入验证不起作用 - 表单仍然提交？

...布时间】：2021-10-1505:40:59【问题描述】：我正在创建一个带有表单的网站，但我无法进行验证，也无法弄清楚我做错了什么。我已经尝试了我能想到的一切。PHP工作，它会提交，但它会一直提交，并且不会停止提交。<!DOCTYPEhtm... 查看详情

为啥输入类型=“url”验证不起作用

】为啥输入类型=“url”验证不起作用【英文标题】：Whyinputtype="url"validationnotworking为什么输入类型=“url”验证不起作用【发布时间】：2021-09-0721:59:18【问题描述】：我希望在输入字段中只有url应该允许，所以我尝试将type... 查看详情

带有 javascript 和 php 的动态表单字段：它不起作用

】带有javascript和php的动态表单字段：它不起作用【英文标题】：dynamicformfieldswithjavascriptanphp:Itdoesn\'twork【发布时间】：2015-12-1610:54:37【问题描述】：我有一个动态添加表单字段的小型javascript。我没有任何php代码的javascriptsn-p工... 查看详情

表单输入验证不起作用

】表单输入验证不起作用【英文标题】：validationonforminputnotworking【发布时间】：2018-08-2106:40:35【问题描述】：我有一个像这样的表格<formdata-toggle="validator"role="form"method="post"><inputtype="text"id="first_name"name="first_name"required>&l... 查看详情

带有新身份验证方法的 Symfony 简单登录表单不起作用

】带有新身份验证方法的Symfony简单登录表单不起作用【英文标题】：SymfonysimpleLoginformwiththenewauthenticationmethodnotworking【发布时间】：2021-10-2012:47:26【问题描述】：我在设置一个新的symfony应用程序时遇到问题，我确信它与新的基... 查看详情

Bootstrapvalidator 在动态输入字段中不起作用

】Bootstrapvalidator在动态输入字段中不起作用【英文标题】：Bootstrapvalidatordoesnotworkindynamicinputfields【发布时间】：2020-02-1516:45:12【问题描述】：我使用Bootstrapvalidator来验证具有多个动态输入字段的表单。显示的输入字段数量取决... 查看详情

（Monaca，Cordova）带有表单身份验证（Cookie）的 Web API 请求不起作用

】（Monaca，Cordova）带有表单身份验证（Cookie）的WebAPI请求不起作用【英文标题】：(Monaca,Cordova)WebAPIrequestwithformauthentication(Cookie)notworking【发布时间】：2020-05-1515:34:39【问题描述】：我有一个关于我的应用程序和WebAPI发布的问题... 查看详情

Jquery表单验证不起作用

...问题描述】：请帮帮我，我是asp.net的新手，想创建一个带有表单验证的简单页面。<scripttype="text/javascript"src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.valida 查看详情

为啥验证不起作用

】为啥验证不起作用【英文标题】：Whydoesn\'tvalidationwork为什么验证不起作用【发布时间】：2017-07-0316:02:21【问题描述】：我一直在尝试掌握Javascript和jquery。我将它应用于我的asp.netgridivew控件并且它可以工作，但我被困在VALIDATION... 查看详情

插入日期选择器后 Jquery 表单验证不起作用

...的预订（预订）表单。验证工作正常，而我的表单有名称输入文本字段、电子邮件输入文本字段、联系人输入文本字段和日期选择器除外。插入jquery日期选择 查看详情

如果用户输入了空格或换行符，则 JQuery 验证不起作用

...是，如果用户输入了空格或换行符，则验证不起作用。在这种情况下如何触发客户端验证？ 查看详情

Access 2010 VBA：为啥这个表单打开和关闭序列不起作用？

】Access2010VBA：为啥这个表单打开和关闭序列不起作用？【英文标题】：Access2010VBA:Whydoesn\'tthissequenceofformopeningsandclosingswork?Access2010VBA：为什么这个表单打开和关闭序列不起作用？【发布时间】：2014-06-3013:54:44【问题描述】：我有... 查看详情

Bootstrap 4表单验证在使用无效反馈时不起作用，即使输入'is-valid'

】Bootstrap4表单验证在使用无效反馈时不起作用，即使输入\\\'is-valid\\\'【英文标题】：Bootstrap4formvalidationnotworkingwhileUsinginvalid-feedbackevenwheninput\'is-valid\'Bootstrap4表单验证在使用无效反馈时不起作用，即使输入\'is-valid\'【发布时间... 查看详情

停止表单提交

...】：2019-07-0923:07:01【问题描述】：我有一个脚本，它显示带有文本输入和按钮的表单。文本输入是必需的，但脚本仅验证输入是否为空/非空。我需要更进一步，所以它只验证字母数字。我无权访问处理表单提交/验证的文件，因... 查看详情

为啥这种方法不起作用？

】为啥这种方法不起作用？【英文标题】：Whydoesthismethodnotwork?为什么这种方法不起作用？【发布时间】：2011-05-1016:40:32【问题描述】：publicAudioInputStreamappend(AudioInputStreammain,AudioInputStreams)throwsUnsupportedAudioFileException,IOExceptionAudioSy... 查看详情

克隆带有值的html表单

】克隆带有值的html表单【英文标题】：clonehtmlformWITHvalues【发布时间】：2011-08-0607:16:16【问题描述】：我正在尝试在填写表格后复制表格。所以用户填写表格然后点击提交。然后打开一个新窗口，其中包含完整的html表单、图像... 查看详情

表单验证在使用 ajax 方法提交之前不起作用

...设置最小长度、电子邮件格式等格式这是我之前的代码（输入class="r 查看详情

文本区域的验证不起作用

...5-01-2906:09:05【问题描述】：我开发了一个表单来获取用户输入和文本区域，我想避免用户输入特殊字符。以下是表单的代码和我用于验证的函数。问题是即使在使用验证之后，它也接受用户输入的特殊字符。我找不到出了什么问... 查看详情