Question

我对angular2非常新，但我似乎为初学者管理好了。但是，我坚持一些验证问题。我想验证一个不是表单字段的组件（例如输入，选择e.t.c）。

我正在使用一个使用未排序列表的引导下拉列表。

dropdownButtons.html

＆＃13;

<div class="btn-group" dropdown>
  <button type="button" class="btn btn-default" dropdownToggle  >
    {{ selected  ? selected : 'Type...'}}
  </button>
  <ul class="dropdown-menu" dropdownMenu>
    <li *ngFor="let value of values;let i = index" (click)="onChange(value)">
      {{value.label}}
    </li>
  </ul>
</div>

＆＃13;

dropdownButtons.component.ts

＆＃13;

import {Component, EventEmitter, Output, Input, Injectable} from '@angular/core';
import { DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'dropdown-buttons',
  template: require('./dropdownButtons.html'),
  directives: [DROPDOWN_DIRECTIVES]
})

@Injectable()
export class DropdownButtons {

  @Input()
  values: DropdownValue[] = [{ "value": "RSS", "label": "RSS" },{ "value": "REST", "label": "REST" }];

  @Input()
  selected : string;

  @Output()
  select: EventEmitter<DropdownValue>;

  constructor() {
    this.select = new EventEmitter();
  }

  onChange(type) {
    this.select.emit(type);
  }

}

export class DropdownValue {
  value:string;
  label:string;

  constructor(value:string,label:string) {
    this.value = value;
    this.label = label;
  }
}

＆＃13;

我的表单看起来像这样。

＆＃13;

  <form (ngSubmit)="onSubmit()" #refererform="ngForm">
    <div class="form-group">
      <label for="inputUrl">Url</label>
      <input type="text" class="form-control" id="inputUrl" placeholder="Url" required
             [(ngModel)]="model.url" name="url">
    </div>
    <div class="form-group">
      <dropdown-buttons  [(selected)]="model.type" (select)="onSelect($event)" ></dropdown-buttons>
    </div>
    <div class="form-group" ng-show="showDetails" *ngIf="isShown()">
      <label for="header">Header</label>
      <textarea placeholder="Default Input" class="form-control" id="header"
                [(ngModel)]="model.header" name="header"></textarea>
    </div>
    <div class="form-group" ng-show="showDetails" *ngIf="isShown()">
      <label for="payload">Payload</label>
      <textarea placeholder="Default Input" class="form-control" id="payload"
                [(ngModel)]="model.payload" name="payload"></textarea>
    </div>
    <button type="submit" class="btn btn-danger" >Submit</button>
  </form>

＆＃13;

我尝试使用ngModel（在标签中使用required）和FormGroup选项，我在其中定义了一些formcontrols。它适用于表单控件，但我似乎无法弄清楚我如何验证非表单组件，它是否可能？

提前感谢。

非表格字段angular2上的表格验证

0 个答案: