角度2 <form> 输入验证

Question

我有一个必填的输入字段，以便进入下一页。我无法弄清楚如何验证输入（名称）...在线搜索并尝试了各种操作，但无济于事...

任何帮助，高度赞赏...

<form>
  <div>
      <div class="form-group" style="width:50%">
        <label class="label label-info" for="Name">Enter Name:</label>
        <input [(ngModel)]="Name" class="form-control" required type="text" 
        name="Name" id="Name" />
  </div>
  <button kendoButton  id="btnSearch" [primary]="true" 
          (click)="redirect()">Next</button>
</div>
</form>

Answer 1

很简单 我建议制作一个模型驱动的表单。

在您的组件中：

myForm: FormGroup;

constructor(private fb: FormBuilder) {
      // We inject FormBuilder to our component

      // Now, we instantiate myForm with FormBuilder
       this.myForm = this.fb.group({
                name: [null, Validators.required]
            });

  }

在模板中，我们将[(ngModel)]替换为formControlName="name" 。

对于您的“下一步” button ，当表单无效时，我们将其禁用： [disabled]='!myForm.valid' 。

还要注意[formGroup]='myForm'部分。

<form [formGroup]='myForm'>
  <div>
      <div class="form-group" style="width:50%">
        <label class="label label-info" for="Name">Enter Name:</label>
        <input formControlName="name" class="form-control" required type="text" 
        name="Name" id="Name" />
  </div>
  <button kendoButton [disabled]='!myForm.valid' id="btnSearch" [primary]="true" 
          (click)="redirect()">Next</button>
</div>
</form>

Answer 2

如果需要使用“ 模板驱动的表单”而不是“ 反应性表单” ，则可以结合使用模板引用变量和对ngModel引用来监视“ Name输入字段上的错误，并执行诸如禁用按钮直到有效的操作：

<form>
  <div>
      <div class="form-group" style="width:50%">
        <label class="label label-info" for="Name">Enter Name:</label>
        <input [(ngModel)]="Name" class="form-control" required type="text" 
        name="Name" id="Name" #foo="ngModel" />
      </div>
  <button kendoButton  id="btnSearch" [primary]="true [disabled]="foo.errors" (click)="redirect()">Next</button>
  </div>
</form>

但是，对于较大的表单，以这种方式进行验证会很快变得混乱，因为每个字段都有一个模板引用变量。 如果验证和逻辑变得更加复杂，则可能值得考虑使用反应式表单。

这是一个演示功能的插件 。