Quelle est la différence entre formControlName et FormControl?

J'utilise ReactiveFormsModuleAngular2 pour créer un composant contenant un formulaire. Voici mon code:

foo.component.ts :

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

foo.component.html (avec [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 (avec 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>

Les deux méthodes fonctionnent. Mais je ne peux pas comprendre quelle est la différence entre l'utilisation [formControl]et formControlName.

Je pense que vous avez manqué un point important: la [formGroup]directive dans le deuxième exemple. formControlNameest utilisé avec [formGroup]pour enregistrer votre formulaire de navigation à plusieurs points. Par exemple:

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

Est équivalent à:

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

Maintenant, imaginez imbriqué FormGroups:)

[formControl]affecte une référence à l' FormControlinstance que vous avez créée au FormControlDirective.

formControlName affecte une chaîne au module Forms pour rechercher le contrôle par son nom.

Si vous créez des variables pour les contrôles, vous n'avez pas non plus besoin du .comme mentionné par Harry, mais je suggérerais également de l'utiliser à la [formGroup]place car avec des formulaires plus compliqués, cela peut devenir compliqué.

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

Il y a une 3e équivalence aux deux fournies dans la réponse acceptée, qui est la suivante (non recommandée):

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

Notez que nous utilisons toujours la directive [formGroup].

Cependant, pour que ce modèle se compile sans erreur, votre composant doit déclarer les contrôles comme AbstractControls et non comme FormControls:

myComponent.ts

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

Cependant, veuillez noter que déclarer AbstractControls n'est pas recommandé , donc si vous obtenez l'erreur, Cannot find control with unspecified name attributeil est probable que vous ayez mélangé les styles ou que vous ayez déclaré vos contrôles comme AbstractControls.

À partir de la documentation Angular ( https://angular.io/guide/reactive-forms ):

Composant

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

Modèle

<form [formGroup]="profileForm">

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

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

</form>

Notez que tout comme le FormGroupcontient un groupe de contrôles, le profileForm FormGroupest lié à l'élément de formulaire avec la FormGroup directive, créant une couche de communication entre le modèle et le formulaire contenant les entrées. L' formControlNameentrée fournie par la FormControlNamedirective lie chaque entrée individuelle au contrôle de formulaire défini dans leFormGroup

avec [formControl]vous pouvez utiliser les avantages de la programmation réactive car FormControla une propriété nommée valueChanges(je connais celle-ci en ce moment, peut-être qu'il y en a plus que cela) qui retourne un Observableauquel vous pouvez vous abonner et l'utiliser. (par exemple, il est très utile dans les scénarios de registre que vous souhaitez vérifier que l'e-mail d'entrée ne soit pas répété dès que l'utilisateur change la valeur)