Сгенерированная функция добавления текста передается как ноль в angular

Question

У меня есть поле ввода, которое получает автоматически сгенерированную строку из события onClick, но когда я отправляю свой запрос на публикацию, оно отображается как нулевое. Когда я вручную набираю строку, она принимает это значение и отправляет его идеально.

Вот мой компонент. html

<form [formGroup]="form" (ngSubmit)="submitForm()">
  <div class="mat-form-field">
    <input class="form-control" placeholder="Name" formControlName="name"
             [ngClass]="{ 'is-invalid': submitted && f.name.errors }" style="margin-bottom: 4px">
    <input class="form-control" placeholder="City" formControlName="city"
             [ngClass]="{ 'is-invalid': submitted && f.city.errors }" style="margin-bottom: 4px">

    <div class="flex">
      <input #input class="form-control" placeholder="ReferenceNumber" formControlName="referenceNumber" disabled>
      <mat-icon (click)="addText()" style="cursor: pointer">autorenew</mat-icon>
    </div>
  </div>

  <div class="modal-footer">
    <button mat-raised-button id="modal-action-button">Add Supplier</button>
    <button mat-raised-button id="modal-cancel-button" (click)="closeModal()">Cancel</button>
  </div>

и мой component.ts:

addText(){
  this.input.nativeElement.focus();
  const startPos = this.input.nativeElement.selectionStart;
  const value = this.input.nativeElement.value;
  this.genCode = Math.random().toString(36).substring(2, 6).toUpperCase() + Math.random().toString(36).substring(2, 6).toUpperCase();
  this.input.nativeElement.focus();
  this.input.nativeElement.value= this.genCode;
}

submitForm() {
  this.submitted = true;
  if (this.form.invalid) { return }

  const formData: any = new FormData();
  formData.append("name", this.form.get('name').value);
  formData.append("city",this.form.get('city').value);
  formData.append("referenceNumber",this.form.get('referenceNumber').value);

  this._Supplier.AddSupplier(new Suppliers(this.form))
    .subscribe( response => console.log(JSON.stringify(response)));

  if (this.submitted == true){
    this.dialogRef.close();
  }
  this.onSubmitted.emit('done');
}

Answer 1

Вы должны установить группу форм ur в конструктор и добавить эту настройку в качестве ссылки на весь конструктор форм в программе.

Я сделал на stackblitz и отредактировать код ur

Можете ли вы попробовать это. Ссылка Angular - формы

Answer 2

Вы просто должны установить значение формы следующим образом:

addText() {

  const randomText = Math.random().toString(36).substring(2, 6).toUpperCase() + Math.random().toString(36).substring(2, 6).toUpperCase();

  this.form.patchValue({
    referenceNumber: randomText
  });
}