Question

我有一个输入字段，为了进入下一页是强制性的，无法弄清楚如何验证输入（名称）...在线搜索并尝试了各种各样的事情，但无济于事......

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

{{1}}

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而不是Reactive Forms，则可以将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>输入验证

2 个答案: