Свойство не существует для типа Компонент во время производственной сборки

Question

Я использую реактивную форму в одном на моем компоненте, и она отлично работает в моей среде разработки. Но во время производственной сборки я получаю ошибки для элементов FormGroup, которые

ОШИБКА в ClientApp \ app \ panel \ applyLeave \ applyLeave.component.html (86,36):: Свойство reportPerson не существует для типа ApplyLeaveComponent. ClientApp \ app \ panel \ applyLeave \ applyLeave.component.html (99,36):: свойство «notifyPerson» не существует для типа «ApplyLeaveComponent». ClientApp \ app \ panel \ applyLeave \ applyLeave.component.html (114,86):: свойство «loading» не существует для типа «ApplyLeaveComponent». ClientApp \ app \ panel \ applyLeave \ applyLeave.component.html (86,36):: Свойство «reportsPerson» не существует для типа «ApplyLeaveComponent». ClientApp \ app \ panel \ applyLeave \ applyLeave.component.html (99,36):: свойство «notifyPerson» не существует для типа «ApplyLeaveComponent».

Файл Component.ts: -

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>

Я пытался использовать тип для моей группы форм как leaveForm:any=FormGroup;, но это не решило проблему

Answer 1

Поскольку у вас есть свойство связывания notifyPerson и другие упомянутые свойства, такие как [(ngModel)]="notifyPerson", вы должны объявить его в своем ts.

как:

notifyPerson:string
reportingPerson:string

Также вам нужно объявить свойство loading так:

loading:boolean

Примечание: избегайте использования [(ngModel)] в Реактивной форме