javascript - 出现错误:“无法绑定到‘ngModal’,因为它不是‘输入’的已知属性”
问题描述
单击编辑按钮后,表单应使用 NgModal 加载用户的数据。但我收到一个错误:“无法绑定到 'ngModal',因为它不是 'input' 的已知属性”?如何解决此错误。?
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);
}
培训师服务.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”,因为它不是“输入”的已知属性
解决方案
如果您使用的是响应式形式,请从 first_name 和 last_name 中删除 [(ngModel)]
<div class="form-group">
<label>First Name : </label>
<input type="text" formControlName="first_name" class="form-control">
</div>
推荐阅读
- linux - 错误:docker 中不可满足的约束
- mysql - MySql 在生产中使用 INNODB_FT_INDEX_CACHE
- entity-framework - ASP.NET Core 3 EF Framework - 运行大量查询时出现瞬时故障
- c++ - 迭代二维数组中不完整的行时出现奇怪的性能下降
- spring - 如何将结果集与具有动态投影的 JPQL 查询的特定列映射到实体
- c++ - Qt 4.8 endInsert/RemoveRows 导致内存泄漏?
- javascript - 转换为 CSV 时如何将数组值保持在同一列中
- c# - 包裹在按钮中的矩形不会触发命令
- python - 返回数组中某个概率以上值的排序索引
- java - 如何连接 2 onActivityResult?