use local variables in angular forms

Question

I have a web app built with angular on frontend and I have a component for review where I am displaying all the reviews of the current product and I am using a form to collect the reviews. This is how the form looks in html:

 <form novalidate [formGroup]="reviewFormGroup" class="cnt-form">
      <div class="row">
        <div class="form-group">
          <label for="exampleInputName">
            Nume
            <span class="astk">*</span>
          </label>
          <input type="text" formControlName="name" class="form-control txt" placeholder="">
        </div>
      </div>
      <div class="row">
        <div class="form-group">
          <label for="exampleInputSummary">
            Titlu
            <span class="astk">*</span>
          </label>
          <input type="text" formControlName="summary" class="form-control txt" id="summary" placeholder="">
        </div>
      </div>
      <div class="row">
        <div class="form-group">
          <label for="exampleInputReview">
            Review
            <span class="astk">*</span>
          </label>
          <textarea formControlName="review" class="form-control txt txt-review"  id="review" rows="4" placeholder="" style="width:500px;"></textarea>
        </div>
      </div>
      <div class="action text-right">
        <button (click)="submitReview()" [disabled]="reviewFormGroup.invalid" class="btn btn-primary btn-upper">SUBMIT REVIEW</button>
      </div>
    </form>

To create the form I used FormGroup in typescript file and I built a function for intializing it:

 reviewFormGroup: FormGroup;
 initializeForm() {
    console.log(this.lastReviewId);
    this.reviewFormGroup = this.fb.group({
      id: [(this.lastReviewId+1).toString()],
      name: ['', Validators.required],
      summary: ['', Validators.required],
      review: ['', Validators.required],
      productId: [this.product["id"]]
    });
  }

The thing is that I need to give a value for the id of the review and the only way I found to give a proper value was to get the Id of the last review from the database (I am storing all the data in SQL Server and I am using C# to connect to the db and take/modify/insert the data). So I created this code:

this.api['getLastReviewId']().subscribe((data: number) => {
  this.lastReviewId = data;
  console.log(this.lastReviewId);
});

which calls a function from api.service.ts which makes a request to the backend and gets the value of the last review's Id. The only problem I have is that no matter where I put this block of code, in initializeForm() function this.lastReviewId has the value undefined, even if the value is shown correct in the log after assigning it. I tried to put this block of code in OnInit() function before the call of initializeForm() and also I put it in initializeForm() starting with the first row of the function, but it still gives me the undefined value for it when I call console.log(this.lastReviewId) from initializeForm().

Am I doing something wrong? I really don't get why it's not assigning the right value even if it's there.

Answer 1

Configure your table in SQL Server to auto generate IDs so that your application layer doesn't need to manage that value. The problem you will run into is that you cannot alter an existing column and set it to an identity. So if at all possible it would be best to rebuild your table and set 'id' to be an identity column

CREATE TABLE [dbo].[TableName]
(
[id] [int] NOT NULL PRIMARY KEY IDENTITY(1, 1),
[name] [varchar(255)] NOT NULL,
[summary] [varchar(255)] NOT NULL
... other columns 
)

After doing this, you will not have a need to touch this column when creating records