Question

单击“编辑”按钮后，窗体应使用NgModal加载用户的数据。但是我遇到一个错误：“因为它不是'input'的已知属性，所以无法绑定到'ngModal'”？如何解决此错误。？

app.compoment.html

<div class="row">
<div id="registration" class="container col-md-6">

  <form  [formGroup]="registrationForm" (ngSubmit)="onSubmit()">

    <mat-horizontal-stepper >
      <mat-step  [stepControl]="personal_details">
        <ng-template matStepLabel>Enter Personal Details</ng-template>
        <div class="jumbotron" formGroupName="personal_details">
          <div formGroupName="name">
            <div class="form-group">
              <label>First Name : </label>
              <input type="text"  formControlName="first_name" class="form-control"  [(ngModal)]="_trainnerservice.currentTrainner.first_name" >
            </div>
            <div class="form-group">
              <label>Last Name : </label>
              <input type="text" formControlName="last_name" class="form-control" [(ngModal)]="_trainnerservice.currentTrainner.last_name" >
            </div>
          </div>    
          <div class="form-group">
            <label>DOB : </label>
            <input type="date" formControlName="dob" class="form-control" >
          </div>
          <div class="form-group">
            <label>About Yourself : </label>
            <textarea formControlName="about_yourself" class="form-control" ></textarea>
          </div>       
          <div class="form-group">
            <label>Language(s) : </label>
            <button type="button" class="btn btn-secondary btn-sm m-2" (click)="addLanguage()">Add Language</button>
            <!-- <input type="text" formControlName="lang" class="form-control" [{ngModal}]=""> -->
            <div formArrayName="languages_known" *ngIf="getLangsform()">
              <div *ngFor="let lang of getLangsform().controls; let i =index;">
                <input type="text" class="form-control" [formControlName]="i"><br>
              </div>
            </div>
          </div>          
          <div class="form-group ">
            <label>Willingly to travel : </label>
            <input type="radio" formControlName="willingly_to_travel" name="willingly_to_travel" value="yes" class="form-control">
            <label>Yes </label>
            <input type="radio" formControlName="willingly_to_travel" name="willingly_to_travel" value="no" class="form-control" >
            <label>No</label>
          </div>
        </div>
        <br/>
        <button type="submit" class="btn btn-primary">Submit</button>
      </mat-step>
    </mat-horizontal-stepper>
  </form>
</div>

<div class="container col-md-6">
  <h4 class="display-5 text-center">Trainners Detailed List</h4>
  <table class="table table-hover">
   <tr *ngFor="let trainner of allTrainner">
        <td><a class="btn text-danger" (click)="OnEdit(trainner)"><i class="fa fa-edit"></i></a></td>
        <td>{{trainner.personal_details.name.first_name}}</td>
        <td>{{trainner.personal_details.name.last_name}}</td>
        <td>{{trainner.personal_details.dob}}</td>
        <td>{{trainner.personal_details.about_yourself}}</td>
        <td>{{trainner.personal_details.willingly_to_travel}}</td>

    </tr> 
  </table>
</div>

app.component.ts

OnEdit(trainner) {
   this._trainnerservice.currentTrainner = Object.assign({}, trainner);
  }

trainner.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Trainner } from '../trainner.model';
import { Observable } from 'rxjs';


const headerOption = {
  headers : new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable({
  providedIn: 'root'
})

export class TrainnerService {
  _url = 'http://localhost:3000/trainner';

  currentTrainner: Trainner = {
    personal_details: { type: Object,
      name: { type: Object,
          first_name: '',
          last_name: ''
      },
      dob: '',
      about_yourself: '',
      languages_known: [''],
      willingly_to_travel: ''
  },
  technologies: [ Object, {
      type: Object,
          name: '',
          experience: null,
          ratings: null,
          costing: { type: Object,
              freshers: null,
              laterals: null,
              project_specific: null
          },
          work_as_consultant: ''
  }],
  certifications: [Object, {
      title: '',
      Year: null
  }],
};



  constructor( private _http: HttpClient ) { }

  register(registrationFormData) {
    return this._http.post<any>(this._url, registrationFormData);
  }

  getAllTrainner(): Observable<Trainner[]> {
    return this._http.get<Trainner[]>(this._url, headerOption);
  }

  updateUser(trainner: Trainner): Observable<any> {
    return this._http.put(this._url, trainner, headerOption);
  }
}

预期输出：点击事件发生后，数据应加载到表单中

错误：由于它不是'input'的已知属性，因此无法绑定到'ngModal'

Answer 1

如果您使用反应形式，请从名字和姓氏中删除[（ngModel）]

<div class="form-group">
   <label>First Name : </label>
   <input type="text"  formControlName="first_name" class="form-control">
</div>

出现错误：“无法绑定到'ngModal'，因为它不是'input'的已知属性”

1 个答案: