1
votes

Modifier la valeur spécifique du formulaire avant l'envoi

J'ai une page d'enregistrement d'utilisateur, où je veux que l'utilisateur puisse télécharger sa propre photo d'avatar. Ma logique jusqu'à présent, est de télécharger une image, d'appeler à changer une fonction qui transforme l'image en UInt8Array pour la stocker sur Mongo. Donc, j'ai:

avatartoUintArray(archivo){
    (archivo, callback) =>{
      let fr = new FileReader();
      fr.onload = function(){
        var arrayBuffer = this.result;
        var array = new Uint8Array(<ArrayBuffer>arrayBuffer);
        callback(array);
        };
   fr.readAsArrayBuffer(archivo.target.files[0]);
  }
    }

  callback(Uint8info){
    this.avatar = Uint8info;
  }

Cette fonction est appelée lors de la soumission, qui prend toutes les données du formulaire et les envoie à authService.register. Cependant, les données UInt8Array sont stockées dans une autre variable. Comment puis-je "ouvrir" form.value pour modifier la valeur de l'avatar?

html pour référence:

<form #frmRegister="ngForm" class="login-container" (ngSubmit)="onRegister(frmRegister)">
      <p><input type="text" name="name" placeholder="Nombre" ngModel required></p>
      <p><input type="email" name="email" placeholder="Email" ngModel required></p>
      <p><input type="password" name="password" placeholder="ContraseÃ±a" ngModel required></p>
      <p><label name="signature_UintArray">Avatar</label>
        <input type="file" name="avatar" placeholder="avatar"(change)="avatartoUintArray($event)"></p>  
      <p>
        <label for="role">Elige un rol</label>
          <select [(ngModel)]="selectedRol" name="role" placeholder="avatar" ngModel >
            <option *ngFor="let rol of role" [ngValue]="rol">{{rol}}</option>
          </select>
          </p>
      <p><input type="submit" value="Register"></p>
    </form>

Et avatartoUintArray ()

XXX

angular forms

0 commentaires

3 Réponses :

0
votes

Essayez :

onRegister(form) :void {
  const formValue = { ...form.value };
  const formValueForApi = {
    ...formValue,
    avatar: // I assume the key is called avatar, overwrite it to what you would like.
  };
  console.log(formValueForApi); See if it is what you would like
  this.authService.register(formValueForApi).subscribe(res =>{
    this.router.navigateByUrl('/auth'); 
  });
}

0 commentaires

0
votes

Jetez un œil à la méthode patchValue du formulaire angulaire que vous pouvez utiliser en corrigeant la valeur du formulaire.

this.form.get('fieldname').patchValue(fieldvalue);

1 commentaires

C'est bien lorsque le formulaire est déclaré en typographie, mais en fait, mon formulaire n'existe que dans le html, comme "

0
votes

Je l'ai résolu avec l'utilisation de View Child: Déclaré dans la classe:

this.registerform.value.avatar = value;

puis:

@ViewChild('frmRegister',{static:true}) registerform: NgForm;

Cela fonctionne comme un charme.

0 commentaires