Property does not exist on type Component during production build

Viewed 4235

Iam using a reactive form in one on my component and its working fine on my developement env. But while on production build i get errors for FormGroup elements that

ERROR in ClientApp\app\panel\applyLeave\applyLeave.component.html(86,36): : Property 'reportingPerson' does not exist on type 'ApplyLeaveComponent'. ClientApp\app\panel\applyLeave\applyLeave.component.html(99,36): : Property 'notifyPerson' does not exist on type 'ApplyLeaveComponent'. ClientApp\app\panel\applyLeave\applyLeave.component.html(114,86): : Property 'loading' does not exist on type 'ApplyLeaveComponent'. ClientApp\app\panel\applyLeave\applyLeave.component.html(86,36): : Property 'reportingPerson' does not exist on type 'ApplyLeaveComponent'. ClientApp\app\panel\applyLeave\applyLeave.component.html(99,36): : Property 'notifyPerson' does not exist on type 'ApplyLeaveComponent'.

Component.ts file:-

export class ApplyLeaveComponent {
  leaveForm: FormGroup;

  ngOnInit() {
    this.leaveForm = this.fb.group({
      leaveType: ['', Validators.required],
      leaveFromDate: ['', Validators.required],
      leaveToDate: ['', Validators.required],
      leaveReason: ['', Validators.required],
      reportingPerson: ['', Validators.required],
      notifyPerson: ['', Validators.required]
    })
  }
}

component.html:-

    <form [formGroup]="leaveForm" class="row" 
    (ngSubmit)="applyLeave(leaveForm)">
      <div class="form-group col-2">
       <label for="" class="col-form-label">Leave type</label>
      <div class="">
      <select class="form-control form-control-sm" 
        formControlName="leaveType" required>
        <option value="">Select</option>
        <option *ngFor="let type of leaveType ;let i = index" 
        [value]="leaveType[i].id">{{type.type}}</option>
      </select>
     </div>
    <div *ngIf="submitted && f.leaveType.errors"> <div 
      *ngIf="f.leaveType.errors.required" style="color:red ; font- 
       size:13px">* <span>Required</span></div></div>
    </div>

   <div class="form-group col-3">
    <label for="" class="col-form-label">From Date</label>
    <div class="input-group add-on">
      <input class="form-control form-control-sm" placeholder="yyyy-mm-dd" 
      ngbDatepicker #d1="ngbDatepicker"
       [minDate]="FromMinDate" formControlName="leaveFromDate" required >

      <div class="input-group-btn col-4">
        <button class="btn fa fa-calendar " (click)="d1.toggle()" 
        type="button"></button>
      </div>
    </div>
    <div *ngIf="submitted && f.leaveFromDate.invalid"> <div 
    *ngIf="f.leaveFromDate.errors.required" style="color:red ; font- 
    size:13px">* <span>Required</span></div></div>
    </div>

  <div class="form-group col-3">
    <label for="" class="col-form-label">To Date</label>
    <div class="input-group add-on">
      <input class="form-control form-control-sm" placeholder="yyyy-mm-dd" 
      ngbDatepicker #d2="ngbDatepicker"
      [minDate]="ToMinDate" formControlName="leaveToDate" required>
      <div class="input-group-btn col-4">
        <button class="btn fa fa-calendar " (click)="d2.toggle()" 
         type="button"></button>
      </div>
    </div>
    <div *ngIf="submitted && f.leaveToDate.invalid"> <div 
     *ngIf="f.leaveToDate.errors.required" style="color:red ; font- 
      size:13px">* <span>Required</span></div></div>
    </div>

  <div class="form-group col-4">
    <label for="" class="col-form-label">Reporting person</label>
    <div class="">
      <ng-multiselect-dropdown [placeholder]="'Select'"
                               [data]="reportingPersonList"
                               [settings]="reportingdropdownSettings"
                               [(ngModel)]="reportingPerson"
                               formControlName="reportingPerson"
                               required>
      </ng-multiselect-dropdown>
    </div>
    <div *ngIf="submitted && f.reportingPerson.invalid"> <div 
     *ngIf="f.reportingPerson.errors.required" style="color:red ; font- 
      size:13px">* <span>Required</span></div></div>
   </div>
  <div class="form-group col-4">
    <label for="" class="col-form-label">Notify</label>
    <div class="">
      <ng-multiselect-dropdown [placeholder]="'Select'"
                               [data]="notifyList"
                               [settings]="dropdownSettings"
                               [(ngModel)]="notifyPerson"
                               formControlName="notifyPerson"
                               required>
      </ng-multiselect-dropdown>
    </div>
    <div *ngIf="submitted && f.notifyPerson.invalid"> <div 
      *ngIf="f.notifyPerson.errors.required" style="color:red ; font- 
       size:13px">* <span>Required</span></div></div>
   </div>
  <div class="form-group col-5">
    <label for="" class="col-form-label">Reason</label>
    <div class="">
      <textarea class="form-control form-control-sm" 
      formControlName="leaveReason" required></textarea>
    </div>
    <div *ngIf="submitted && f.leaveReason.invalid"> <div 
      *ngIf="f.leaveReason.errors.required" style="color:red ; font- 
      size:13px">* <span>Required</span></div></div>
    </div>
  <div class="col-3">
    <button type="submit" class="btn btn-primary" name="submit" 
    id="leavebutton" [disabled]="loading">Apply</button>
  </div>
</form>

I have tried using type for my Formgroup as leaveForm:any=FormGroup; but that didn't solve issue

1 Answers

Since you have binded property notifyPerson and other mentioned properties like [(ngModel)]="notifyPerson", you need to declare it in your ts.

Like:

notifyPerson:string
reportingPerson:string

Also you need to declare property loading like this:

loading:boolean

Note: Avoid using [(ngModel)] in Reactive form

Related