Как обновить базу данных, используя реактивную форму углового материала и Restful API

Question

Позвольте Мне взять известный пример с Книгой, Чтобы объяснить Мой вопрос. В моем BookService.ts есть угловая форма реактивной формы материала, основанная на модели книги. Когда я изменяю какое-то поле в этой форме и отправляю его на свой сервер, чтобы обновить соответствующую запись, используя метод PUT Angular HttpClient. Он не обновляет мою базу данных и возвращает ошибку и ошибку. Когда я отлаживаю его, он показывает, что идентификатор не определен, когда я console.log(BookForm.value) получаю следующее: {$key: 1234, Title: "Book Title1", Topic: "Topic1"}, нет необходимости говорить, что моему Angular HttpClient PUT Restful API нужен этот идентификатор, чтобы иметь возможность обновить эту конкретную запись в таблице «Моя база данных». Ниже приведен мой упрощенный поддельный код для объяснения.

BookModel.ts File, My Model

export interface Book{
    ID: number;
    Title: string;
    Topic: string;
}

BookService.ts File, My Service

BookForm: FormGroup = new FormGroup({
    $key: new FormControl(null),
    Title: new FormControl('', Validators.required),
    Topic: new FormControl('', Validators.required),
});


UpdateBook(bookObj: Book): Observable<Book>
{
return this.http.put<Book>(`...api/book/${bookObj.ID}`, bookObj,{
    headers: new HttpHeaders({
    'Content-Type: 'application/json'
   })
 })
}

Note: This Throw Error, ID Undefined

Book-form.component.html File

<form [formGroup] = "BookService.BookForm" class="FormCls">
 <mat-grid-list rowHeight="200px">
  <mat-grid-tile>
      <div class="form-controles-container">
        <input type="hidden" formControlName="$key" />
        <mat-form-field>
          <input formControlName="Title" matInput placeholder="Title*" />
          <mat-error>Title Needed</mat-error>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="Topic" matInput placeholder="Topic*" />
          <mat-error>Topic Needed</mat-error>
        </mat-form-field>

        <div class="button-row">
          <button mat-raised-button color="primary" type="submit" (click)="onSubmit()">Submit</button>
        </div>

      </div>
  </mat-grid-tile>
 </mat-grid-list>
</form>

Book-form.component.ts File

onSubmit(): void 
{
    BookService.UpdateBook(BookService.BookForm.value).subscribe(
     b => alert(`Book Updated Successfully`),
     err => alert(`Exception While Updating: ${err}`) 
 );
}

Конечно, я знаю, что мне нужно каким-то образом преобразовать значение моей формы в модель Book и убедиться, что у меня есть этот идентификатор внутри, прежде чем я передам его в службу http put. но я не знаю, как это сделать, я довольно новичок как в мире Angular, так и в Typescript, и я учусь. Я люблю читать, прежде чем спрашиваю, поэтому прочитал много статей, но ни одна не работала для меня. Например, я попробовал приведенную ниже статью на stackoverfelow, но у меня не получилось Реактивные формы корректно преобразуют значение формы в объект модели

Я действительно ценю вас, профессионалы, и спасибо за ваше время и помощь.

Answer 1

когда вы вызываете любой AbstractControl метод .value, вы получаете объект с парами prop: value для каждого ввода в вашей форме. Как вы можете видеть, вы получите объект без идентификатора, возможно, причина в том, что форма не имеет свойства 'ID', или, может быть, это потому, что значение равно null (когда вы преобразуете объект в JSON, все свойства, имеющие значение null удалить).

Если вы знаете идентификатор из HTML, вы можете передать его в функции <button mat-raised-button color="primary" type="submit" (click)="onSubmit(sth.id)">

если это не так (я думаю, что это не так), вы можете добавить идентификатор перед вызовом службы с помощью метода .patchValue({ id: idInfo }), который есть у любого AbstractControl (в этом случае вам не нужно добавлять скрытый ввод, если вы не добавите его по другой причине).

Сделайте патч перед вызовом сервиса, и он должен работать.

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

изменить (добавить пример кода):

onSubmit(): void 
{
    // the lines I added
    const bf = BookService.BookForm;
    bf.patchValue({ ID: 'anyIdYouLike' });

    // what stays the same (except the bf.value shortened version)
    BookService.UpdateBook(bf.value).subscribe(
       b => alert(`Book Updated Successfully`),
       err => alert(`Exception While Updating: ${err}`) 
 );
}