0

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

任何帮助高度赞赏...

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

2 回答 2

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".

对于您的 Next 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>
于 2017-07-24T15:41:15.283 回答
0

如果您需要使用Template Driven Forms而不是Reactive Forms，您可以结合使用模板引用变量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>

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

这是一个演示功能的plunker。

于 2017-07-24T15:47:40.057 回答