Измените c значение формы перед отправкой

Question

У меня есть страница регистрации пользователя, где я хочу, чтобы пользователь мог загрузить свою аватарку. Моя логика c до сих пор состоит в том, чтобы загружать изображение, вызывать функцию изменения, которая преобразует изображение в массив UInt8Array для его сохранения в Mon go. Итак, у меня есть:

 onRegister(form):void{
this.authService.register(form.value).subscribe(res =>{
  this.router.navigateByUrl('/auth');
})}

Эта функция вызывается при отправке, которая берет данные всей формы и отправляет их в authService.register. Однако данные UInt8Array хранятся в другой переменной. Как я могу "открыть" form.value для изменения значения аватара?

html для справки:

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

И avatartoUintArray ()

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

Answer 1

Взгляните на метод Angular form patchValue, который вы можете использовать для исправления значения формы.

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

Answer 2

Я решил это с помощью View Child: объявлен внутри класса:

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

, а затем:

this.registerform.value.avatar = value;

Он работает как шарм.

Answer 3

Попробуйте:

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'); 
  });
}