javascript - touched - ng forms angular 6



O que é#atributo automático aqui e por que é necessário (1)

É uma variável de referência de modelo que nos permite obter referência ao elemento html ou a outra coisa se declararmos diretiva sobre este elemento.

Podemos declarar variável de referência de modelo via (1)

  • #var
  • ref-var

Comportamento #Default

Na maioria dos casos, o Angular define o valor da variável de referência para o elemento html no qual foi declarado (2).

<div #divElem></div>
<input #inputEl>
<table #tableEl></table>
<form #formEl></form>

No anterior, todas as variáveis ​​de referência de modelo se referirão aos elementos correspondentes.

#divElem     HTMLDivElement
#inputEl     HTMLInputElement
#tableEl     HTMLTableElement
#formEl      HTMLFormElement

#Os diretivos podem mudar o comportamento padrão

Mas uma diretiva pode alterar esse comportamento e definir o valor para outra coisa, como ela mesma.

Angular atribui referências com valor vazio ao componente (3)

Se temos componente como:

@Component({
  selector: '[comp]',
  ...
})
export class SomeComponent {}

e modelo como:

<div comp #someComp></div>

então a variável #someComp irá se referir ao componente em si ( SomeComponent instance ).

Angular não localiza diretivas em referências com valor vazio (4)

Se @Component decorador @Directive para @Directive

@Directive({
  selector: '[comp]',
  ...
})
export class SomeDirective {}

então a variável #someComp se referirá a HTMLDivElement .

Como podemos obter a instância SomeDirective neste caso?

Felizmente, a variável de referência do modelo pode ter valor (5)

  • #var="exportAsValue"

  • ref-var="exportAsValue"

Podemos definir propriedade exportAs dentro de @Component/@Directive decorator (6):

exportAs é um nome sob o qual a instância do componente é exportada em um modelo. Pode receber um nome único ou uma lista de nomes delimitada por vírgulas.

@Directive({
  selector: '[comp]',
  exportAs: 'someDir',
  ...
})
export class SomeDirective {}

e, em seguida, use o valor exportAs como valor para a variável de referência de modelo no modelo (7):

<div comp #someComp="someDir"></div>

Depois disso, #someComp se referirá a nossa diretriz.

Agora vamos imaginar que temos várias diretivas aplicadas a este componente. E queremos obter uma instância específica da diretiva. exportAs propriedade exportAs é uma boa opção para resolver esse problema.

Vamos voltar ao seu código

Se você abrir o código-fonte do componente MdAutocomplete , poderá ver:

@Component({
  ...
  exportAs: 'mdAutocomplete'
})
export class MdAutocomplete {
  ...

Desde no seu modelo você tem

#auto="mdAutocomplete"

Em seguida, a variável #auto se referirá à instância do componente MdAutocomplete . Esta referência é usada na diretiva MdAutocompleteTrigger :

@Directive({
  selector: 'input[mdAutocomplete], input[matAutocomplete],' +
            'textarea[mdAutocomplete], textarea[matAutocomplete]',
  ...
})
export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
  @Input('mdAutocomplete') autocomplete: MdAutocomplete;

porque você está passando auto variável auto para inserir no modelo

<input mdInput placeholder="State" [mdAutocomplete]="auto"

Podemos omitir valor e usar apenas o nome da variável, neste caso, como

<md-autocomplete #auto>

mas

  • O valor da atribuição ao valor da propriedade exportAs nos indica precisamente onde obter a instância.

  • se md-autocomplete for uma diretiva, auto variável auto se referirá a HTMLElement .

Portanto, prefira especificar valor para a variável de referência do modelo, se você duvidar do que ele se referirá.

Eu estou tentando aprender o material angular 2 e me deparei com este atributo #auto no autocomplete. Eu entendo auto pode ser substituído por qualquer texto, mas por que precisa de um # aqui antes de auto e qual é o nome desse atributo?

<md-input-container>
  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
               ^^^^ what is name of this property
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>




angular2-forms