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

发布时间：2020-12-17 18:04:45 所属栏目：安全来源：网络整理

导读：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" buttonSubmit/button /form 什么是使用ng-m

<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的差异？什么时候使用它们？

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!