生产环境构建期间，类型“Component”上不存在属性。

Question

生产环境构建期间，类型“Component”上不存在属性。

3

我正在使用一个响应式表单在我的组件中，它在我的开发环境中运行良好。但是，在生产构建时，我会收到FormGroup元素的错误提示。

Component.ts文件代码如下：

ERROR in ClientApp\app\panel\applyLeave\applyLeave.component.html(86,36): : ApplyLeaveComponent类型上不存在'reportingPerson'属性。 ClientApp\app\panel\applyLeave\applyLeave.component.html(99,36): : ApplyLeaveComponent类型上不存在'notifyPerson'属性。 ClientApp\app\panel\applyLeave\applyLeave.component.html(114,86): : ApplyLeaveComponent类型上不存在'loading'属性。 ClientApp\app\panel\applyLeave\applyLeave.component.html(86,36): : ApplyLeaveComponent类型上不存在'reportingPerson'属性。 ClientApp\app\panel\applyLeave\applyLeave.component.html(99,36): : ApplyLeaveComponent类型上不存在'notifyPerson'属性。

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;的Formgroup，但这并没有解决问题。

- Ameerudheen.K

请展示 applyLeave.component.html。 - Adrita Sharma

问题已更新。 - Ameerudheen.K

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adrita Sharma · Accepted Answer

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

例如：

notifyPerson:string
reportingPerson:string

同时，您需要像这样声明loading属性：

loading:boolean

注意：避免在响应式表单中使用 [(ngModel)]。