Angular Forms - 初始化的正确方法是什么
Angular Forms - What is the correct way to initialize
我有一个包含 3 个字段的基本表单。名称、描述和 ID。数据应由调用 C# API 的服务填充,然后将 returns JSON 加载到表单。
当它打开时,我得到了正确的数据,但我得到了这个错误。如果我删除名称输入,错误只会移动到描述字段然后是 id。
我仍在学习 Angular,但已阅读大量内容以尝试解决此问题。我想我没问题,但我猜这与初始化有关,因为如果我在从场景服务获取数据之前添加此代码,就会出现错误。
this.scenario = { 'id': 0,
'name': '',
'description': '',
'dateCreated': '',
'createdBy': '',
'dateModified': '',
'modifiedBy': '',
'active': true };
那么正确的编码方式是什么,这样我的界面就可以初始化而无需硬编码?
test.component.html
<h1>
Edit Scenario - {{ name.value }}
</h1>
<div class='panel-body'>
<form novalidate
#scenarioForm="ngForm"
(ngSubmit)="saveForm()">
<div class='row'>
<div class='col-md-1'><label for="scenarioName" class="control-label">Name</label></div>
<div class='col-md-6'>
<div class="form-group" [class.has-error]="name.invalid && name.touched">
<input class="form-control"
#name="ngModel"
name="scenarioName"
type="text" maxlength="50" placeholder="Scenario name" required
[(ngModel)]="scenario.name">
</div>
</div>
</div>
<div class='row'>
<div class='col-md-1'><label for="descption">Descption</label></div>
<div class='col-md-6'>
<div class="form-group" [class.has-error]="description.invalid && description.touched">
<textarea #description="ngModel"
ngControl="description"
class="form-control"
rows="4" maxlength="500"
placeholder="What is this scenario for?"
required
name="description"
[(ngModel)]="scenario.description"></textarea>
<div *ngIf="description.invalid && description.dirty" class="alert alert-danger">
Description is required, and must be at least blah blah...
</div>
</div>
</div>
</div>
<div class='panel-footer'>
<button class="btn btn-default" type="submit">Save</button>
</div>
<br><br>
<input #id type="text" name="id" [(ngModel)]="scenario.id" #id="ngModel">
</form>
<div id="debugging">
<br>
Valid? {{scenarioForm.valid}}<br>
Model: {{ scenario | json }} <br>
Model: {{ result | json }}<br>
Form: {{ scenarioForm.value | json }}
<br>
</div>
test.component.ts
import { Component, OnInit, NgModule } from '@angular/core';
import { SharedModule } from './../shared/shared.module';
import { FormsModule, NgForm, FormGroup } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ScenarioService } from './scenario.service';
import { IScenario } from './scenario';
import { Router, ActivatedRoute } from '@angular/router';
@NgModule({
imports: [
FormsModule
],
exports: [FormsModule]
})
@Component({
selector: 'app-scenario-form',
templateUrl: './test.component.html',
})
export class TestComponent implements OnInit {
// tslint:disable-next-line:no-inferrable-types
private pageTitle: string = 'New Scenario';
scenario: IScenario;
result: IScenario;
constructor(private _scenarioService: ScenarioService,
private _route: ActivatedRoute) {}
ngOnInit() {
const scenarioId = this._route.snapshot.paramMap.get('id');
if (scenarioId) {
this._scenarioService.getScenario(+scenarioId).subscribe(
scenario => this.scenario = scenario);
}
}
}
由于您是从 API 异步获取响应,因此您需要首先处理 null,您可以使用安全导航运算符
<input #id type="text" name="id" [(ngModel)]="scenario?.id" #id="ngModel">
同样适用于您的所有字段。
正如您上面提到的,其他方法是通过初始化对象来修复场景
由于需要完成双向数据绑定,需要通过创建实例来初始化对象
scenario: IScenarioUpdate = {modifiedBy: ''}
我有一个包含 3 个字段的基本表单。名称、描述和 ID。数据应由调用 C# API 的服务填充,然后将 returns JSON 加载到表单。
当它打开时,我得到了正确的数据,但我得到了这个错误。如果我删除名称输入,错误只会移动到描述字段然后是 id。
我仍在学习 Angular,但已阅读大量内容以尝试解决此问题。我想我没问题,但我猜这与初始化有关,因为如果我在从场景服务获取数据之前添加此代码,就会出现错误。
this.scenario = { 'id': 0,
'name': '',
'description': '',
'dateCreated': '',
'createdBy': '',
'dateModified': '',
'modifiedBy': '',
'active': true };
那么正确的编码方式是什么,这样我的界面就可以初始化而无需硬编码?
test.component.html
<h1>
Edit Scenario - {{ name.value }}
</h1>
<div class='panel-body'>
<form novalidate
#scenarioForm="ngForm"
(ngSubmit)="saveForm()">
<div class='row'>
<div class='col-md-1'><label for="scenarioName" class="control-label">Name</label></div>
<div class='col-md-6'>
<div class="form-group" [class.has-error]="name.invalid && name.touched">
<input class="form-control"
#name="ngModel"
name="scenarioName"
type="text" maxlength="50" placeholder="Scenario name" required
[(ngModel)]="scenario.name">
</div>
</div>
</div>
<div class='row'>
<div class='col-md-1'><label for="descption">Descption</label></div>
<div class='col-md-6'>
<div class="form-group" [class.has-error]="description.invalid && description.touched">
<textarea #description="ngModel"
ngControl="description"
class="form-control"
rows="4" maxlength="500"
placeholder="What is this scenario for?"
required
name="description"
[(ngModel)]="scenario.description"></textarea>
<div *ngIf="description.invalid && description.dirty" class="alert alert-danger">
Description is required, and must be at least blah blah...
</div>
</div>
</div>
</div>
<div class='panel-footer'>
<button class="btn btn-default" type="submit">Save</button>
</div>
<br><br>
<input #id type="text" name="id" [(ngModel)]="scenario.id" #id="ngModel">
</form>
<div id="debugging">
<br>
Valid? {{scenarioForm.valid}}<br>
Model: {{ scenario | json }} <br>
Model: {{ result | json }}<br>
Form: {{ scenarioForm.value | json }}
<br>
</div>
test.component.ts
import { Component, OnInit, NgModule } from '@angular/core';
import { SharedModule } from './../shared/shared.module';
import { FormsModule, NgForm, FormGroup } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ScenarioService } from './scenario.service';
import { IScenario } from './scenario';
import { Router, ActivatedRoute } from '@angular/router';
@NgModule({
imports: [
FormsModule
],
exports: [FormsModule]
})
@Component({
selector: 'app-scenario-form',
templateUrl: './test.component.html',
})
export class TestComponent implements OnInit {
// tslint:disable-next-line:no-inferrable-types
private pageTitle: string = 'New Scenario';
scenario: IScenario;
result: IScenario;
constructor(private _scenarioService: ScenarioService,
private _route: ActivatedRoute) {}
ngOnInit() {
const scenarioId = this._route.snapshot.paramMap.get('id');
if (scenarioId) {
this._scenarioService.getScenario(+scenarioId).subscribe(
scenario => this.scenario = scenario);
}
}
}
由于您是从 API 异步获取响应,因此您需要首先处理 null,您可以使用安全导航运算符
<input #id type="text" name="id" [(ngModel)]="scenario?.id" #id="ngModel">
同样适用于您的所有字段。
正如您上面提到的,其他方法是通过初始化对象来修复场景
由于需要完成双向数据绑定,需要通过创建实例来初始化对象
scenario: IScenarioUpdate = {modifiedBy: ''}