Javascript 如何在angular中使用相同的提交按钮更新和提交被动表单？

我有一个这样的视图组件。编辑按钮将我路由到register组件，在该组件中我使用patchvalue更新表单

问题是：我正在使用相同的按钮更新和注册表单，因此在编辑过程中会填充值，但也会创建相同bookingId的另一个实例。我只想编辑表单而不创建任何额外的重复id

注册表格.component.ts

import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormControl, FormGroup, ValidatorFn,AbstractControl } from '@angular/forms';
import {RegisterService} from './register.service';
import {ViewService} from '../view-component/view.service';
import {Booking} from '../booking.model';
import {ActivatedRoute} from '@angular/router';
@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html',
  styleUrls: ['./registration-form.component.css']
})
export class RegistrationFormComponent implements OnInit {

  category:any=[
    {id:1, dining:'Fine Dining'},
    {id:2, dining:'Buffet'},
    {id:3, dining:'Outdoor'}
  ];


  constructor(private fb: FormBuilder, private http: HttpClient, private register:RegisterService,
    private route:ActivatedRoute, private view:ViewService) { }
  
  isAddMode:boolean;
  bookingForm:FormGroup;
  unamePattern =/^[ A-Za-z_@.$/#&+-]*$/;

  ngOnInit() {
    this.bookingForm=this.fb.group({
      bookingId:['', [Validators.required, validateId]],
      guestName:['', Validators.required],
      guestId:['', [Validators.required,Validators.pattern(this.unamePattern)]],
      gender:['', Validators.required],
      categoryName:['', Validators.required],
      bookingDate:['', Validators.required]
    })

    this.route.paramMap.subscribe(
      params=>{
        const bookingId=params.get('id');
        if(bookingId){
          this.getBooking(bookingId)
        }
      }
    )
  }

  getBooking(id){
    this.view.getBooking(id).subscribe(
      (user)=>this.editBooking(user),
      (err:any)=>console.log(err)
    )
  }

  editBooking(user:Booking){
      this.bookingForm.patchValue({
        bookingId:user.bookingId,
        guestName:user.guestName,
        guestId:user.guestId,
        gender:user.gender,
        categoryName: user.categoryName,
        bookingDate: user.bookingDate
      })
  }


  book(data:Booking){
this.register.registerBooking(data)
.subscribe    
    (
      (res)=>{
      console.log("Data returned is" , res);
      })
  }


}

registration.component.html

<div class="row">
<div class="col-md-4 offset-md-4">
    <div class="card-body">
        <div class="card-title">
            <h3>Book a Buffet</h3></div>
    </div>
    <form class="form-horizontal" [formGroup]="bookingForm" (ngSubmit)="book(bookingForm.value)">

        <div class="form-group">
            <label for="bookingId" class="control-label">
                Booking Id:
            </label>
            <input name="bookingId" type="text" formControlName="bookingId" class="form-control">
            <div id="bookingIdErr" *ngIf="bookingForm.controls.bookingId.invalid">
                <span class="text-danger" *ngIf="bookingForm.controls.bookingId.errors?.required &&
                bookingForm.controls.bookingId.touched">
                Enter an ID
              </span>
              <span class="text-danger" *ngIf="bookingForm.controls.bookingId.errors.IdError &&
              bookingForm.controls.bookingId.touched && bookingForm.controls.bookingId.value!==' ' ">
                {{bookingForm.controls.bookingId.errors.IdError.message}}
              </span>
            </div>
        </div>

        <div class="form-group">
        <label for="guestName" class="control-label">
            Guest Name:
        </label>
        <input name="guestName" type="text" formControlName="guestName" class="form-control">
        <div id="guestNameErr" *ngIf="bookingForm.controls.guestName.invalid">
            <span class="text-danger" *ngIf="bookingForm.controls.guestName.errors?.required &&
            bookingForm.controls.guestName.touched">
            Enter a Name
          </span>
        </div>
    </div>
    <div class="form-group">
        <label for="guestId" class="control-label">
            Guest Id:
        </label>
        <input name="guestId" type="text" formControlName="guestId" class="form-control">
        <div id="guestIdErr" *ngIf="bookingForm.controls.guestId.invalid">
            <span class="text-danger" *ngIf="bookingForm.controls.guestId.errors?.required &&
            bookingForm.controls.guestId.touched">
            Enter an Id
          </span>
          <span class="text-danger" *ngIf="bookingForm.controls.guestId.errors?.pattern &&
          bookingForm.controls.guestId.touched">
          Enter valid Id
        </span> 
        </div>
    </div>

    <div class="form-group">
        <label for="gender" class="control-label">Gender : </label>
        <input id="male" type="radio" value="male" name="gender" formControlName="gender" >
        <label for="male"> Male</label>
        <input id="female" type="radio" value="female" name="gender" formControlName="gender" >
        <label for="female">Female</label>
        <div id="genderErr" *ngIf="bookingForm.controls.gender.invalid">
            <span class="text-danger" *ngIf="bookingForm.controls.gender.errors?.required &&
            bookingForm.controls.gender.touched">
            Enter a gender
          </span>
          </div>
    </div>
    <div class="form-group">
    <label for="categoryName">Category: </label>
    <select formControlName="categoryName" class="form-control" class="control-label">
        <option value="">Select an option</option>
        <option *ngFor="let cat of category" [value]="cat.dining">{{cat.dining}}</option>
    </select>
    <div id="categoryErr" *ngIf="bookingForm.controls.categoryName.invalid">
        <span class="text-danger" *ngIf="bookingForm.controls.categoryName.errors?.required &&
        bookingForm.controls.categoryName.touched">
        Enter a category
      </span>
    </div>
</div>
    <div class="form-group">
    <label for="bookingDate">Date of booking</label>
    <input type="date" placeholder="dd/mm/yyyy" class="form-control" formControlName="bookingDate"> 
    <div id="bookingDateErr" *ngIf="bookingForm.controls.bookingDate.invalid">
        <span class="text-danger" *ngIf="bookingForm.controls.bookingDate.errors?.required &&
        bookingForm.controls.bookingDate.touched">
        Enter a date
      </span>
      
    </div>
</div>


    <div class="form-group">
        <button type="submit" class="btn btn-primary" 
         [disabled]="!bookingForm.valid">Book</button>
      </div>
    </form>
</div>

预订自助餐
预订编号：
输入一个ID
{{bookingForm.controls.bookingId.errors.IdError.message}
客人姓名：
输入一个名称
客人Id:
输入一个Id
输入有效的Id
性别：
男性
女性
输入性别
类别：
选择一个选项
{{猫食}
输入一个类别
预订日期
输入日期
书

我应该在这里创建一个新的更新按钮，还是可以使用相同的按钮簿进行更新和发布？

---

请帮助

一个简单的解决方案是在后端修改查询。与其简单地将数据保存在数据库中，不如首先使用集合上的“bookingId”字段进行搜索查询。如果您找到特定bookingId的任何数据，则意味着您需要编辑/更新数据，而不是注册数据。如果在集合中未找到任何具有相同bookingId的数据，则意味着您需要在集合中注册此数据

例如，现在您的代码看起来像是在后端的RegisterAPI中-

    booking.save(data)   //save the incoming data in collection

将代码更改为以下内容：

    booking.find({bookingId: data.bookingId},(err,record)=>{      //find record for given bookingId
        if(record){
           booking.findAndUpdate(data);   //if record already exist then update it
        }
         else{
           booking.save(data)       //if record doesnt exist then create it
         }
     }
    )

---

当您说“在编辑过程中填充了值，但也创建了相同bookingId的另一个实例”时，您的意思是在数据库中创建了另一个实例，对吗？Naveen Chahar-Yes您可以查看下面答案中提供的方法。