I want to send error feedback by doing submitted check in Angular form control. But the form.submitted property does not work, so I am getting an error message. Property 'submitted' comes from an index signature, so it must be accessed with ['submitted'].

html file

<form #clientRequestForm [formGroup]="clientRequestForm" (ngSubmit)="newClientRequest()">
<div >
  <label  for="username"
    >Username</label
  >
  <input
    type="text"
    
    id="email"
    formControlName="username"
    placeholder="Enter username"
    [class.is-invalid]="clientRequestForm.submitted && clientRequestForm.get('username')?.invalid"
  />
  <div >
    <div>Username is required</div>
    
  </div>
</div>

<div >
  <label  for="password">Item Type</label>
  <select name="" formControlName="itemid"  id="" [class.is-invalid]="clientRequestForm.submitted&& clientRequestForm.get('itemId')?.invalid">
    <option value="{{item.itemid}}" *ngFor="let item of clientItems">{{item.itemname}}</option>
  </select>
  <div >
    <div>Item is required</div>
    
  </div>
</div>
<div >
    <button type="submit"  type="submit" [disabled]="loading">
        <span >
            <span > {{CheckingText}} </span>
            <span
            *ngIf="loading"
            
            role="status"
            >
            </span>
        </span>
    </button>
</div>
</form>

component form code

clientRequestForm= new FormGroup({
    username: new FormControl(null, Validators.required),
    itemid: new FormControl(null, Validators.required)
  }, {updateOn : 'submit'})

How can I fix this?

CodePudding user response：

The submitted property does not exist in a Form Group object type (https://angular.io/api/forms/FormGroup).

An alternative could be to create a flag that changes when the form loads.

export class ClientRequestComponent implements OnInit {
      submitted: boolean = false;
      ...

      newClientRequest(){
         submitted = true;
         if (this.clientRequestForm.valid) {
            ....
         }
      }
}