Quelle est la différence entre formControlName et FormControl?

[formControl] assigne une référence à la FormControl instance que vous avez créée à la FormControlDirective.

formControlName assigne une chaîne pour les formes module permettant de rechercher le contrôle par son nom.

si vous créez des variables pour les contrôles, vous n'avez pas non plus besoin de . comme L'a mentionné Harry, mais je suggère aussi d'utiliser [formGroup] au lieu de cela parce qu'avec des formes plus compliquées cela peut devenir désordre.

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 troisième équivalence aux deux réponses fournies dans la réponse acceptée, ce qui est ceci (non recommandé):

<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 soit compilé sans erreur, alors votre component doit déclarer les contrôles comme AbstractControls et non FormControls:

moncomposant.ts

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

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

[formControl] vous pouvez utiliser les avantages de la programmation réactive parce que FormControl possède une propriété nommée valueChanges (je sais que ce droit maintenant, peut-être qu'il est plus que cela) qui retourne un Observable que vous pouvez vous abonner et utiliser. (par exemple, il est très utile dans le registre des scénarios dont vous souhaitez vérifier l'entrée de l'email de ne pas répéter dès que l'utilisateur de modifier la valeur)

à Partir de l'angle de docs (https://angular.io/guide/reactive-forms):

Composant

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

Template

<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 FormGroup contient un groupe de contrôles, l' profileForm FormGroup est lié à l'élément de formulaire avec FormGroup de communication entre le modèle et la formulaire contenant les entrées. formControlName contribution fournie par le FormControlName la directive lie chaque entrée individuelle au formulaire de contrôle définies dans le FormGroup