formcontrol - get value form angular

¿Cuál es la diferencia entre formControlName y FormControl?

Question

Estoy usando ReactiveFormsModule de Angular2 para crear un componente que contiene un formulario. Aquí está mi código:

foo.component.ts :

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        ''fullname'': ['''', Validators.required],
        ''gender'': []
    });
}

foo.component.html (con [formControl] ):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" [formControl]="myForm.controls.fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

foo.component.html (con formControlName ):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" formControlName="fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender">
            <label>Female</label>
        </div>
    </div>
</div>

Ambas formas funcionan. Pero no puedo entender cuál es la diferencia entre usar [formControl] y formControlName .

Answer 1

Creo que se perdió un punto importante: la directiva [formGroup] en el segundo ejemplo. formControlName se usa junto con [formGroup] para guardar su formulario de navegación de puntos múltiples. Por ejemplo:

<div>
  <input type="text" [formControl]="myForm.controls.firstName"/>
  <input type="text" [formControl]="myForm.controls.lastName"/>
  <input type="text" [formControl]="myForm.controls.email"/>
  <input type="text" [formControl]="myForm.controls.title"/>
</div>

Es equivalente a:

<div [formGroup]="myForm">
  <input type="text" formControlName="firstName"/>
  <input type="text" formControlName="lastName"/>
  <input type="text" formControlName="email"/>
  <input type="text" formControlName="title"/>
</div>

Ahora imagine FormGroups anidados :)

Answer 2

De los documentos angulares ( https://angular.io/guide/reactive-forms ):

Componente

@Component({
  ...
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''''),
    lastName: new FormControl(''''),
  });
}

Modelo

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

Tenga en cuenta que, al igual que FormGroup contiene un grupo de controles, profileForm FormGroup está vinculado al elemento de formulario con la directiva FormGroup , creando una capa de comunicación entre el modelo y el formulario que contiene las entradas. La entrada formControlName proporcionada por la directiva FormControlName vincula cada entrada individual al control de formulario definido en FormGroup

Answer 3

Hay una tercera equivalencia a las dos proporcionadas en la respuesta aceptada, que es esto (no recomendado):

<div [formGroup]="myForm">
  <input type="text" [formControl]="firstName"/>
  <input type="text" [formControl]="lastName"/>
  <input type="text" [formControl]="email"/>
  <input type="text" [formControl]="title"/>
</div>

Observe que todavía estamos usando la directiva [formGroup].

Sin embargo, para que esta plantilla se compile sin errores, entonces su componente debe declarar los controles como AbstractControls y no FormControls:

myComponent.ts

firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl

Sin embargo, tenga en cuenta que no se recomienda declarar AbstractControls, por lo que si obtiene el error Cannot find control with unspecified name attribute , es probable que haya mezclado los estilos o haya declarado sus controles como AbstractControls.

Answer 4

con [formControl] puede usar las ventajas de la programación reactiva porque FormControl tiene una propiedad llamada valueChanges (lo sé en este momento, tal vez hay más que eso) que devuelve un Observable que puede suscribir y usar. (por ejemplo, es muy útil en escenarios de registro en los que desea verificar el correo electrónico de entrada para que no se repita tan pronto como el usuario cambie el valor)

Answer 5

[formControl] asigna una referencia a la instancia de FormControl que creó al FormControlDirective .

formControlName asigna una cadena al módulo de formularios para buscar el control por nombre.

Si crea variables para los controles, tampoco necesita el . como mencionó Harry, pero también sugeriría usar [formGroup] lugar porque con formas más complicadas esto puede volverse desordenado.

constructor(fb: FormBuilder) {
    this.fullName = new FormControl('''', Validators.required);
    this.gender = new FormControl('''');
    this.myForm = fb.group({
        ''fullname'': this.fullName,
        ''gender'': this.gender
    });
}