Angular2 <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

如果您需要结合使用 Template Driven Forms rather than Reactive Forms, you can use a template reference variable 和参考 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>

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

这里是 plunker 功能演示。

Angular2 <form> 输入验证

Angular2 <form> input validation

validation

angular2-forms

ng-required

angular