Question

 <form role="form" #form="form" (ng-submit)="submit(form.value)">
    <input type="text" placeholder="Enter your name" ng-control="name">
    <input type="text" placeholder="Enter your email" [(ng-model)]="email">
    <button>Submit</button>
  </form>

使用ng-model和ng-control的差异是什么？何时使用它们？

Answer 1

控件负责获取有关表单状态或特定输入（有效，原始，触摸，......）的提示。它通常用于显示验证错误（如果有）。这是一个示例：

<div
     [ngClass]="{'has-error':!inputControl.valid && !state.control.pending,'form-group':label,'form-group-sm':label}">
  <label *ngIf="label" for="for"
     class="col-sm-2 col-md-2 control-label">My input</label>

  <div class="col-sm-8 col-md-8"
       [ngClass]="{'col-sm-8': label, 'col-md-8': label}">
    <input [(ngModel)]="myInput" [ngFormControl]="inputControl"/>
    <span *ngIf="!inputControl.valid" class="help-block text-danger">
      <div *ngIf="state?.errors?.required">The field is required</div>
      (...)
      <div *ngIf="state?.errors?.invalidZip">The zip code format isn't correct</div>
    </span>
  </div>
</div>

您还可以利用控件的valueChanges属性检测输入的更改，如下所述：

this.inputControl.valueChanges.subscribe(data => {
  console.log('value updated - new value = '+data);
});

由于它是一个可观察的，你可以利用运算符来创建一个异步处理链。例如，根据输入同步列表：

inputControl.valueChanges.debounceTime(500).flatMap(
  val => {
    return this.service.searchPlaces(val);
  }).subscribe((data) => {
    this.places = data;
  });

另一方面，ngModel允许使用双向绑定将输入绑定到组件的属性。如果通过代码更新属性，则输入值将更新，如果输入由用户更新，则属性将更新。

正如@Günter所指出的，您的代码段包含一些错误。这是正确的：

<form role="form" #form="form" (ngSubmit)="submit(form.value)">
  <input type="text" placeholder="Enter your name" ngControl="name">
  <input type="text" placeholder="Enter your email" [(ngModel)]="email">
  <button>Submit</button>
</form>

Answer 2

ngControl，ngModel和ngFormControl是NgControlStatus指令的选择器，所以它们之间没有区别......

NgControlStatus 指令自动应用于Angular表单，根据控件状态设置CSS类（有效/无效/脏/等）。

NgFormControl是一个指令，它将模板中的输入字段绑定到用于以编程方式创建表单字段的Control类。

NgFormControl 将现有Control绑定到DOM元素。

在angular2中使用ng-model和ng-control之间的区别？

2 个答案: