Diferença entre [(ngModel)] e [ngModel] para vincular o estado à propriedade?

89

Aqui está um exemplo de modelo:

<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">

<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">

Aqui, os dois fazem a mesma coisa. Qual é o preferido e por quê?

Pequeno dragão
fonte
7
[ngModel]- é apenas uma associação de propriedade, não uma associação bidirecional. Portanto, inserir um novo valor não será atualizado overRideRate.
VadimB
2
[(ngModel)] é uma ligação bidirecional que vem do Angular 2. [ngModel] é apenas para exibição.
David Doan
2
Alerta de descontinuação: no Angular 6, ( angular.io/api/forms/FormControlName#use-with-ngmodel ) afirma o seguinte: Suporte para usar a propriedade de entrada ngModel e evento ngModelChange com diretivas de formulário reativas foi descontinuado no Angular v6 e será removido no Angular v7. Consulte também: ( stackoverflow.com/questions/50371079/… )
sboggs11
1
sboggs10 O link que você forneceu refere-se à combinação de ngModel com formas reativas, isso não está relacionado à questão em quase todos os casos.
Cesar Leonardo Ochoa Contreras
Aqui está uma boa explicação sobre [(ngModel)], duas vias de ligação de dados no Angular
cateyes

Respostas:

147

[(ngModel)]="overRideRate" é a forma abreviada de [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

  • [ngModel]="overRideRate"é ligar overRideRate- se aoinput.value
  • (ngModelChange)="overRideRate = $event"é atualizar overRideRatecom o valor de input.valuequando o changeevento foi emitido.

Juntos, eles são o que o Angular2 fornece para ligação bidirecional.

Günter Zöchbauer
fonte
58

[ngModel]="currentHero.name" é a sintaxe para vinculação unilateral, enquanto,

[(ngModel)]="currentHero.name" é para ligação bidirecional, e a sintaxe é composta de:

[ngModel]="currentHero.name" e (ngModelChange)="currentHero.name = $event"

Se você só precisa passar de modelo, use o primeiro. Se o seu modelo precisa ouvir eventos de mudança (por exemplo, quando o valor do campo de entrada muda), use o segundo.

seidme
fonte
11

Fluxo de dados Angular2 +:

No Angular, os dados podem fluir entre o modelo (classe de componente ts.file) e a visualização (html do componente) das seguintes maneiras:

  1. Do modelo à vista.
  2. Da vista ao modelo.
  3. Os dados fluem em ambas as direções, também conhecido como vinculação de dados bidirecional .

Sintaxe:

modelo para visualizar:

<input type="text" [ngModel]="overRideRate">

Essa sintaxe também é conhecida como associação de propriedade . Agora, se a overRideRatepropriedade do campo de entrada mudar, a visualização será atualizada automaticamente. No entanto, se a visualização for atualizada quando o usuário inserir um número, a overRideRate propriedade não será atualizada.

vista para o modelo:

(input)="change($event)"            // calling a method called change from the component class
(input)="overRideRate=$event.target.value" // on input save the new value in the title property

O que acontece aqui é que um evento é disparado (neste caso, evento de entrada, mas pode ser qualquer evento). Podemos então chamar métodos da classe do componente ou salvar diretamente a propriedade em uma propriedade de classe.

Ligação de dados bidirecional:

<input [(ngModel)]="overRideRate" type="text" >

A sintaxe a seguir é usada para vinculação de dados bidirecional. É basicamente um açúcar sintático para ambos:

  1. Modelo de encadernação para visualizar.
  2. Vinculando a vista ao modelo

Agora, algo muda dentro de nossa classe, isso refletirá nossa visão (modelo para visão), e sempre que o usuário alterar a entrada, o modelo será atualizado (visão para modelo).

Willem van der Veen
fonte
5

[ngModel]avalia o código e gera uma saída (sem ligação bidirecional) .
[(ngModel)]avalia o código e gera uma saída e também permite a associação bidirecional .

Buzzzzzzz
fonte