angular - 在生产构建期间，类型组件上不存在属性

Question

我在我的组件中使用了一种 react 形式，它在我的开发环境中运行良好。但是在生产构建时，我得到了 FormGroup 元素的错误

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 文件:-

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]
    })
  }
}

组件.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

由于您绑定(bind)了属性 notifyPerson 和其他提到的属性，例如 [(ngModel)]="notifyPerson"，您需要在 ts 中声明它。

喜欢:

notifyPerson:string
reportingPerson:string

您还需要像这样声明属性loading:

loading:boolean

注意:避免在 Reactive 形式中使用 [(ngModel)]