web-dev-qa-db-fra.com

Comment faire un formControl en lecture seule

Comment faire un formControl dans angular en lecture seule)

Je sais que je peux le faire en HTML comme

<input type="text" formControlName="xyz" readonly />

comment le faire à partir de JS Code et non pas html c'est-à-dire de manière orientée modèle

angularangular-reactive-forms
15
Ankit Raonka

Si vous utilisez des formulaires réactifs, vous pouvez l'affecter de manière dynamique, comme dans l'exemple de code ci-dessous (champ email).

this.registerForm = this.formBuilder.group({
      first_name: ['', Validators.required],
      last_name: ['', Validators.required],
      email: new FormControl({value: null, disabled: true}, Validators.required),
      password: ['', Validators.compose([Validators.required, Validators.email])],
      confirm_password: ['', Validators.required],
});

Si vous souhaitez obtenir toutes les valeurs, y compris les contrôles désactivés, vous devez utiliser:

this.registerForm.getRawValue();

Voir la méthode commenter le code source

/**
   * The aggregate value of the `FormGroup`, including any disabled controls.
   *
   * If you'd like to include all values regardless of disabled status, use this method.
   * Otherwise, the `value` property is the best way to get the value of the group.
   */
  getRawValue(): any;

Profitez de la programmation!

22
Ervin Llojku

À mon avis, il n'y a aucune utilisation de EN LECTURE SEULE sous une forme réactive (angulaire 2+).

Dans un projet HTML normal, basé sur CSS

Nous utilisons un attribut READONLY pour empêcher l'utilisateur de saisir/sélectionner le contrôle de formulaire, mais nous obtenons une valeur à partir de l'entrée.

Nous utilisons l'attribut DISABLED pour empêcher l'utilisateur de saisir/sélectionner le contrôle de formulaire et nous n'obtenons pas de valeur à partir de l'entrée.

Dans un Angular 2+ projets basés sur l’ILC

Nous n'avons pas besoin de l'attribut EN LECTURE SEULE pour empêcher l'utilisateur de saisir/sélectionner. Parce que DÉSACTIVÉ l'attribut est suffisant pour empêcher l'utilisateur de taper/sélectionner et vous pouvez également obtenir une valeur à partir du champ d'entrée/sélection/case à cocher/radio désactivé.

Vous pouvez ajouter un attribut désactivé au champ de manière pilotée par le modèle.

lors de la création du groupe de formulaires

this.formGroupName = this.fb.group({
    xyz: [{ value: '', disabled: true }, Validators.required]
});

à l'exécution

this.formGroupName.get('xyz').disable({ onlySelf: true });

Obtention des valeurs de FormGroup (Edited)

Pour obtenir les valeurs des champs non désactivés uniquement

this.formGroupName.value;

Pour obtenir les valeurs de tous les champs du groupe de formulaires

this.formGroupName.getRawValue();

Donc ici vous n'avez pas besoin d'attribut READONLY. J'espère que ça aide.

10
silambarasan R.D

Nous pouvons utiliser n’importe quel attribut HTML et le lier dans angular en utilisant [].

Donc, vous pouvez utiliser la liaison d'attribut pour l'attribut readonly dans ce contrôle

par exemple

<input type="text" formControlName="xyz" [readonly]="anyBooleanPropertyFromComponent" />

6
Steve

les éléments basés sur formControl sont en lecture seule quand ils sont désactivés:

this._formBuilder.group({
        some: new FormControl(
          { value: parseInt(this.myobject.subObject.stringMember), disabled: true },
          Validators.required
        ),

Mais cela est vrai pour IE et Chrome mais false pour Firefox ....

Une solution populaire consiste à ajouter un <div> transparent spécifique à Firefox sur l’entrée et à activer le contrôle d’entrée en cliquant sur celui-ci:

css:

#wrapper {
  position: relative;
  &::after {
    content: "%";
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
#click {
  width: 100%;
  height: 35px;
  position: absolute; 
  background: transparent;
}

html:

 <label>
    <span class="label">Name </span>
    <div id="wrapper">
      <div
        *ngIf="isFirefox"
        id="click"
        (click)="enable('name')"
      ></div>-->
      <input type="text" formControlName="name" readonly />
    </div>
  </label>

Manuscrit:

export class MyObjectComponent implements OnInit {
  @Input() public group: FormGroup;
  isFirefox = /Firefox\//i.test(window.navigator.userAgent);

  constructor() {}

  ngOnInit() {}

  enable(name) {
    this.group.get(name).enable();
  }
}

Mais cette solution ne fonctionne qu'avec les éléments "<input>" et non avec les éléments "<textarea>" ni avec les éléments "<input>" si vous utilisez un FormControl imbriqué.

La vraie solution consiste à définir le formulaire de contrôle comme non désactivé:

this._formBuilder.group ({une: nouvelle FormControl ({valeur: parseInt (this.myobject.subObject.stringMember), désactivée: false}, Validators.required),

et, en même temps, pour définir le ou en lecture seule:

  <label>
    <span class="label">SomeLabel</span>
    <textarea
      maxlength="500"
      formControlName="some"
      readonly
    ></textarea>
  </label>

ou entrée:

<input type="text" formControlName="name" />
0
user1767316