Невозможно перезаписать значение формы в NgForm ViewChild - PullRequest
Новая
       18

Невозможно перезаписать значение формы в NgForm ViewChild

0 голосов
/ 02 марта 2020

Мне объяснили (здесь, между прочим), что с помощью ViewChild я мог получить доступ к NgForm, его данным и иметь возможность изменять его перед отправкой. Итак, у меня есть следующий код: 

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

onRegister(form):void{

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

async file2Base64(archivo, origen) {
      const file = archivo.target.files[0];
      this.file2Base64result = await new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
      if (origen == "avatar") this.registerform.value.avatar = this.file2Base64result;
      if (origen == "signature") this.registerform.value.signature = this.file2Base64result;
  }

и html выглядит так: 

 <form #frmRegister="ngForm" class="login-container" (ngSubmit)="onRegister(registerform)">
//part of form
 <p><label name="signature">Firma Personal [PNG]</label>
        <input type="file" name="signature" placeholder="Firma Personal" ngModel (change)="file2Base64($event, 'signature')"></p>
      <p><label>Avatar</label>
        <input type="file" name="avatar" placeholder="Avatar" ngControl="avatar" ngModel (change)="file2Base64($event, 'avatar')"></p>
       <p><input type="submit" [disabled]="frmRegister.invalid" value="Register"></p>
    </form>

Как видите, при изменении входного файла вызывается file2Base64. Он должен получить файл и преобразовать его в строку base 64. Однако при отправке на сервер отправляется значение по умолчанию «C: / fakepath / image.png». Независимо от того, что я делаю, значение по умолчанию перезаписывает значение, которое я пытаюсь перезаписать, то есть строку base64.

Ответы [ 2 ]

1 голос
/ 02 марта 2020

Нельзя присвоить значение с помощью: this.registerform.value. ПОТОМУ ЧТО значение элемента управления для только для чтения .

. Вы можете использовать setValue или patchValue:

setValue метод для обновления элемента управления в любой форме до его нового значения, полностью заменяя старое значение.

Пример: 

this.registerform.controls['avatar'].setValue(this.file2Base64result);

patchValue : только обновления свойства, которые определяет модель формы.

Пример: 

this.registerform.patchValue({
  avatar: this.file2Base64result,
  signature: this.file2Base64result
});

И в HTML Добавьте эти два скрытых ввода, как вы предлагали: 

<input type="hidden" name="signature" ngModel/>
<input type="hidden" name="avatar" ngModel/>

Для более информация: https://angular.io/guide/reactive-forms

0 голосов
/ 02 марта 2020

Используя информацию, предоставленную @oussail, я создал новые скрытые входные данные в форме, чтобы передать им преобразованные данные, и все работало хорошо. 

 <input type="hidden" name="signature" ngModel/>
      <input type="hidden" name="avatar" ngModel/>
...