Question

我对Angular很陌生，而且我已经在网上搜索过了，没有为我的情况找到正确的解决方案。

我有一个由* ngFor创建的动态表单。如果输入全部为空并且显示警报div，我需要禁用提交按钮;但是如果这些表单中至少有一个包含与“＆＃39;”不同的内容，我需要启用提交。

这是我的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>

这是我的Typescript代码

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);
}

使用此代码，我可以在用户第一次在一个输入中键入内容时进行检查，但如果它清空了其中一个（或全部），则会失败

感谢您的时间

Answer 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");
    });
}

角度2，如果输入至少一个输入，则验证表格

1 个答案: