角度 2,如果输入了至少一个输入,则验证表单

Posted

技术标签:

【中文标题】角度 2,如果输入了至少一个输入,则验证表单【英文标题】:angular 2, validate form if at least one input is typed 【发布时间】:2018-03-20 16:24:53 【问题描述】:

我对 Angular 很陌生,我已经在网上搜索过,但没有找到适合我情况的正确解决方案。

我有一个由 *ngFor 创建的动态表单。如果输入全部为空,我需要禁用提交按钮并显示警报 div;但如果其中至少一个表单包含不同于 '' 的内容,我需要启用提交。

这是我的html代码

<form class="form-inline" #form="ngForm">
    <div class="form-group" *ngFor="let meta of state.metaById; let i = index" style="margin: 5px">
      <label>meta.nome</label>
      <input type="text" class="form-control" #nome (blur)="inputInArray(nome.value, i);">
    </div>
    <button type="button" class="btn btn-primary" (click)="getCustomUnitaDocumentaliRow(this.param)" [disabled]="fieldNotCompiled">invia</button> 
</form>
<div class="alert-notification" [hidden]="!fieldNotCompiled">
    <div class="alert alert-danger">
      <strong>Va compilato almeno un campo.</strong>
    </div>
</div>

这是我的打字稿代码

inputInArray(nome: string, indice) 
if (this.state.controlloMetaId = true) 
  this.state.metadatoForm[indice] = nome;

// this.fieldNotCompiled = false;
for (const i in this.state.metaById) 
  console.log(this.state.metadatoForm);
  if (isUndefined(this.state.metadatoForm[i]) || this.state.metadatoForm[i] === '') 
    this.fieldNotCompiled = true && this.fieldNotCompiled;
   else 
    this.fieldNotCompiled = false && this.fieldNotCompiled;
  
  console.log(this.fieldNotCompiled);

使用此代码,我可以检查用户第一次在一个输入中输入内容时,但如果它清空其中一个(或全部)则失败

感谢您的宝贵时间

【问题讨论】:

【参考方案1】:

更新

检查是否有任何输入发生了不同于空白或空格的更改,只需执行以下操作:

<input ... #nome (input)="fieldNotCompiled = !nome.value.trim()" ....>

DEMO


您可以为表单更改设置监听器:

@ViewChild('form') myForm: NgForm;
....
ngOnInit() 
    this.myForm.valueChanges.subscribe((value: any) => 
         console.log("One of the inputs has changed");
    );

【讨论】:

你能更好地解释一下吗?它对我不起作用,但我肯定需要将 html 更改为实际具有“myForm”... 我试过了,但是没用。我还删除了(模糊),认为它可能有问题......但没有出现日志

以上是关于角度 2,如果输入了至少一个输入,则验证表单的主要内容,如果未能解决你的问题,请参考以下文章

最简单的 JQuery 验证规则示例

获取表单角度的字段

AngularJS - 表单自定义验证 - 检查至少一个输入是不是为空

使用 jQuery 验证复选框和输入文本值

如何以角度形式实现条件要求验证?

如果选中某些复选框,则 jquery 验证表单输入