title: Get a id from the formbuilder to delete a row in Angular 6
body: <p>I have a HTML page with a few forms to fill in for the user:</p>
  
  <pre><code>&lt;div class="card-body"&gt;
    &lt;form [formGroup]="FormCar" (ngSubmit)="AddCar(FormCar.value)"&gt;
      &lt;input type="hidden" formControlName="CarId" id="carId" /&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-group col-sm-3"&gt;
          &lt;label&gt;Brand&lt;/label&gt;
          &lt;input type="text" class="form-control" formControlName="Brand" id="brand" placeholder="Enter brand"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-group col-sm-3"&gt;
          &lt;label&gt;Model&lt;/label&gt;
          &lt;input type="text" class="form-control" formControlName="Model" id="model" placeholder="Enter model"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-group col-sm-3"&gt;
          &lt;label&gt;Color&lt;/label&gt;
          &lt;input type="text" class="form-control" formControlName="Color" id="color" placeholder="Enter color"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-group col-sm-3"&gt;
          &lt;label&gt;Speed&lt;/label&gt;
          &lt;input type="number" class="form-control" formControlName="TopSpeed" id="topSpeed" placeholder="Enter speed"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="btn-group mr-2"&gt;
        &lt;button type="submit" class="btn btn-danger mr-1"&gt;Save changes&lt;/button&gt;
        &lt;button type="reset" class="btn btn-danger mr-1"&gt;New record&lt;/button&gt;
        &lt;button type="button" class="btn btn-danger mr-1" (click)="DeleteCar(CarId)"&gt;Delete&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I use a HTML table to display data and when the user clicks on a row it fill with the <strong>inputs</strong> information. I used this method to fill the fields:</p>
  
  <pre><code>EditCar(carId: number) {
      this.carservice.getCarById(carId).subscribe((res: any) =&gt; {
        this.FormCar.patchValue({
          CarId: res.carId,
          Brand: res.brand,
          Model: res.model,
          Color: res.color,
          TopSpeed: res.topSpeed
        })
      });
    }
  </code></pre>
  
  <p>This is working good I have build my form with <strong>formbuilder</strong> like this:</p>
  
  <pre><code>  buildFormCar() {
      this.FormCar = this.formBuilder.group({
        CarId: ['', Validators.required],
        Brand: ['', Validators.required],
        Model: ['', Validators.required],
        Color: ['', Validators.required],
        TopSpeed: ['', Validators.required],
      });
    }
  </code></pre>
  
  <p>After the fields are filled I want to delete it by his <strong>id</strong> and I use this method for it:</p>
  
  <pre><code>DeleteCar(carId: string) {
      if (confirm("Weet u zeker?")) {
        this.carservice.deleteCar(carId).subscribe(() =&gt; {
          this.GetCar();
          this.GetCarCount();         
        })
      }
    }
  </code></pre>
  
  <p>When I click on the delete button I get a error on the backend (I use .NET core)</p>
  
  <p>This is the error message:</p>
  
  <blockquote>
    <p>System.InvalidOperationException: 'The property 'CarId' on entity type
    'Car' has a temporary value while attempting to change the entity's
    state to 'Deleted'. Either set a permanent value explicitly or ensure
    that the database is configured to generate values for this property.'</p>
  </blockquote>
  
  <p>The method that I use in the backend look like this:</p>
  
  <pre><code> [Route("DeleteCar")]
   [HttpDelete]
   public IActionResult Delete(long id)
   {
     _context.Cars.Remove(new Car() { CarId = id });
     _context.SaveChanges();
     return Ok();
   }
  </code></pre>
  
  <p>It seems it cannot find the <code>carId</code> when the <strong>delete</strong> happens. </p>
  
  <p>Can someone point me in the right direction? </p>