Etapas para usar FormControl em Angular

1. importação FormControl:

import {
    
     FormControl } from '@angular/forms';

Crie uma nameinstância tipo FormControl:

name = new FormControl('Jerry');

O valor inicial é FormControldefinido .

2. No arquivo HTML, crie um relacionamento de ligação entre o elemento e a namepropriedade :

Após isso, o valor do atributo Component name será automaticamente passado para o elemento HTML:

Dessa forma, controles de formulário e elementos DOM podem se comunicar entre si: a exibição reflete as alterações no modelo e o modelo reflete as alterações na exibição.

Use .valuepara acessar o valor da instância FormControl:

<label for="name">Name: </label>
<input id="name" type="text" [formControl]="name">

<p>显示控件的值: {
   
   { name.value }}</p>

Como usar setValuepara modificar o valor de FormControl

updateName() {
    
    
  this.name.setValue('Nancy');
}

Após clicar no botão:

O valor se torna nancy:

Veja o processamento unificado do evento zone.jsde resposta de clique no :

Finalmente core.jsligue executeListenerWithErrorHandling:

Execute setValue:

Como responder à entrada do usuário

constructor(){
    
    
    this.name.valueChanges.subscribe(selectedValue => {
    
    
      console.log('value changed: ', selectedValue);
    })
  }

Efeito:

Encontrado na pilha de chamadas, ainda executeListenerWithErrorHandling:

EventEmitterEnvie uma atualização por :

ng-untouched ng-pristine ng-validQuando essas três classes recebem valores?

• ng-untouched O campo ainda não foi tocado
• ng-pristine O campo ainda não foi modificado
• ng-valid O conteúdo do campo é válido

Como usar grupos de formuláriosform group

Crie FormGroupuma .

Seu construtor é um objeto json e o tipo de propriedade é FormControl.

FormGroup também pode usar métodos setValuecomo .

O grupo de formulários também pode rastrear o estado de cada controle e suas alterações, portanto, se o estado ou valor de um dos controles for alterado, o controle pai também emitirá uma nova alteração de estado ou evento de alteração de valor.

Como vincular a propriedade FormGroup ao arquivo HTML:

<form [formGroup]="profileForm">

  <label for="first-name">First Name: </label>
  <input id="first-name" type="text" formControlName="firstName">

  <label for="last-name">Last Name: </label>
  <input id="last-name" type="text" formControlName="lastName">

</form>

A propriedade fornecida pela FormControlNamediretiva vincula formControlNamecada caixa de entrada FormGroupà definida em . Os dados no grupo FormGroup também podem ser monitorados por:表单控件
valueChanges

this.profileForm.valueChanges.subscribe(
      value => {
    
    
        console.log('group value: ', value);
      }
    );

Use setValuepara modificar o valor do grupo:

this.profileForm.setValue(
      {
    
    
        firstName: 'Tom',
        lastName: "Tom1"
      }
    );

O evento submit emitido pela tag form é um evento DOM embutido, que pode ser acionado clicando em um botão do tipo submit. Isso também permite que o usuário envie o formulário preenchido com a tecla Enter.

Adicione um botão na parte inferior do formulário para acionar o envio do formulário.

onSubmit(){
    
    
    console.warn(this.profileForm.value);
  }