[英]My Control is not getting value from Model class Angular 6 TS
当用户单击按钮时,我正在将数据传递给我的模型类。 当我进行控制台操作时,数据将正确地建模到类,因此它向我显示了所有带有值的字段,但问题是我的输入字段未获取该值,字段为空。 请分享任何解决方案。 该值在我的控制台中是正确的,但是输入字段未获取它们。
HTML
<form #form2="ngForm">
<div class="row">
<input type="hidden" name="ID" #ID="ngModel" [(ngModel)]="objCompanyFinancialDetails.ID"
class="form-control" />
<div class="col-md-4">
<div class="form-group">
<label>Conversation Date Year</label>
<mat-select placeholder="Please Select" name="FDConversationDateYear" class="form-control" #FDConversationDateYear="ngModel"
[(ngModel)]="objCompanyFinancialDetails.FDConversationDateYear">
<mat-option value="2019">2019</mat-option>
<mat-option value="2018">2018</mat-option>
<mat-option value="2017">2017</mat-option>
<mat-option value="2016">2016</mat-option>
<mat-option value="2015">2015</mat-option>
<mat-option value="2014">2014</mat-option>
<mat-option value="2013">2013</mat-option>
<mat-option value="2012">2012</mat-option>
<mat-option value="2011">2011</mat-option>
<mat-option value="2010">2010</mat-option>
<mat-option value="2009">2009</mat-option>
<mat-option value="2008">2008</mat-option>
<mat-option value="2007">2007</mat-option>
<mat-option value="2006">2006</mat-option>
<mat-option value="2005">2005</mat-option>
<mat-option value="2004">2004</mat-option>
<mat-option value="2003">2003</mat-option>
<mat-option value="2002">2002</mat-option>
</mat-select>
<!-- <input name="FDConversationDateYear" class="form-control" #FDConversationDateYear="ngModel"
[(ngModel)]="objCompanyFinancialDetails.FDConversationDateYear" />
<div class="validation-error" *ngIf="FDConversationDateYear.invalid && FDConversationDateYear.touched">This field is required.</div> -->
<!-- <div class="datepicker-cover">
<input class="form-control" [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date" required>
<mat-datepicker-toggle class="datepicker-toggler" matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp
startView="multi-year"
(yearSelected)="chosenYearHandler($event, dp)"
panelClass="example-month-picker">
</mat-datepicker>
</div> -->
<!-- K<div class="validation-error" *ngIf="FDConversationDateYear.invalid && FDConversationDateYear.touched">This field is required.</div> -->
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Conversion Date Month</label>
<mat-select placeholder="Please Select" name="FD_Conversion_Date_Month" class="form-control" #FD_Conversion_Date_Month="ngModel"
[(ngModel)]="objCompanyFinancialDetails.FD_Conversion_Date_Month">
<mat-option value="1">January</mat-option>
<mat-option value="2">Febuary</mat-option>
<mat-option value="3">March</mat-option>
<mat-option value="4">April</mat-option>
<mat-option value="5">May</mat-option>
<mat-option value="6">June</mat-option>
<mat-option value="7">July</mat-option>
<mat-option value="8">August</mat-option>
<mat-option value="9">September</mat-option>
<mat-option value="10">October</mat-option>
<mat-option value="11">November</mat-option>
<mat-option value="12">December</mat-option>
</mat-select>
<!-- <input name="FD_Conversion_Date_Month" class="form-control" #FD_Conversion_Date_Month="ngModel"
[(ngModel)]="objCompanyFinancialDetails.FD_Conversion_Date_Month" /> -->
<!-- <div class="validation-error" *ngIf="FD_Conversion_Date_Month.invalid && FD_Conversion_Date_Month.touched">This field is required.</div> -->
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Financials Year End Date</label>
<div class="datepicker-cover">
<input name="FD_Financials_year_end_date" #FD_Financials_year_end_date="ngModel"
[(ngModel)]="objCompanyFinancialDetails.FD_Financials_year_end_date" class="form-control"
required [matDatepicker]="picker2"/>
<mat-datepicker-toggle class="datepicker-toggler" [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</div>
<!-- <div class="validation-error" *ngIf="FD_Financials_year_end_date.invalid && FD_Financials_year_end_date.touched">This field is required.</div> -->
</div>
</div>
</form>
Component.ts //Method for getting ID onclick
updateFinancialDetailsbyCompID(CompanyID: number){
this.companyFinancialDetailsService.GetAllbyCompID(CompanyID).subscribe(res => {
this.objCompanyFinancialDetails = res;
console.log(this.objCompanyFinancialDetails);
});;
}
onclick方法
populateItem(element) {
this.updateFinancialDetailsbyCompID(element.ID);
}
回调函数中的此方法不一定相同。 尝试
updateFinancialDetailsbyCompID(CompanyID: number){
let self = this;
self.companyFinancialDetailsService.GetAllbyCompID(CompanyID).subscribe(
res => {
self.objCompanyFinancialDetails = res;
console.log(self.objCompanyFinancialDetails);
}
);
}
您可以通过FormBuilder使用FormGroup。 举个例子
testForm: FormGroup;
constructor(private _formBuilder: FormBuilder, private _demoService: DemoService) {
this.testForm = this.createForm();
}
private createForm(): FormGroup {
return this._formBuilder.group({
Name: [null, Validators.required],
Lastname: [null, Validators.requider]
});
}
updateForm(): void {
this._demoService.getFormValues().subscribe((response) => {
this.testForm.controls['Name'].setValue(response.Name);
this.testForm.controls['Lastname'].setValue(response.Lastname);
});
}
这是html模板;
<form name="testForm" [formGroup]="testForm">
<mat-form-field>
<mat-label>Name</mat-label>
<input type="text"
matInput
formControlName="Name">
</mat-form-field>
<mat-form-field>
<mat-label>Lastname</mat-label>
<input type="text"
matInput
formControlName="Lastname">
</mat-form-field>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.