मैं अपने घटक पर एक में एक प्रतिक्रियाशील रूप का उपयोग कर रहा हूं और यह मेरे विकास एनवी पर ठीक काम कर रहा है। लेकिन उत्पादन निर्माण के दौरान मुझे फॉर्मग्रुप तत्वों के लिए त्रुटियां मिलती हैं:

ClientApp\app\panel\applyLeave\applyLeave.component.html(86,36) में त्रुटि: संपत्ति 'reportingPerson' प्रकार 'ApplyLeaveComponent' पर मौजूद नहीं है। ClientApp\app\panel\applyLeave\applyLeave.component.html(99,36): : संपत्ति 'NotifyPerson' टाइप 'ApplyLeaveComponent' पर मौजूद नहीं है। ClientApp\app\panel\applyLeave\applyLeave.component.html(114,86): : 'ApplyLeaveComponent' प्रकार पर संपत्ति 'लोडिंग' मौजूद नहीं है। ClientApp\app\panel\applyLeave\applyLeave.component.html(86,36): : संपत्ति 'रिपोर्टिंगपर्सन' '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]
    })
  }
}

घटक.एचटीएमएल:-

    <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; के रूप में टाइप का उपयोग करने का प्रयास किया है, लेकिन इससे समस्या हल नहीं हुई

2
Ameerudheen.K 27 जून 2019, 10:11

1 उत्तर

सबसे बढ़िया उत्तर

चूंकि आपने संपत्ति notifyPerson और [(ngModel)]="notifyPerson" जैसी अन्य उल्लिखित संपत्तियों को बाध्य किया है, इसलिए आपको इसे अपने ts में घोषित करने की आवश्यकता है।

पसंद:

notifyPerson:string
reportingPerson:string

इसके अलावा आपको संपत्ति loading को इस तरह घोषित करना होगा:

loading:boolean

नोट: [(ngModel)] को प्रतिक्रियाशील रूप में उपयोग करने से बचें

3
Adrita Sharma 27 जून 2019, 10:26