单击编辑按钮后,窗体应使用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);
}
}
预期输出:点击事件发生后,数据应加载到表单中
错误:无法绑定到“ ngModal”,因为它不是“ input”的已知属性
最佳答案
如果您使用反应形式,请从first_name和last_name中删除[(ngModel)]
<div class="form-group">
<label>First Name : </label>
<input type="text" formControlName="first_name" class="form-control">
</div>