NativeScript/Angular - 使用操作栏时无法使用的表单
问题描述:
首先我实现了下面的代码。NativeScript/Angular - 使用操作栏时无法使用的表单
app.component.html
<StackLayout [formGroup]="form">
<label text="Name"></label>
<TextField formControlName="Name"></TextField>
<label text="Last Name"></label>
<TextField formControlName="LastName"></TextField>
<button text="save" (tap)="save()"></button>
</StackLayout>
app.component.ts
public form: FormGroup;
constructor(private fb: FormBuilder){
this.form = this.fb.group({
"Name": ["", [Validators.required]],
"LastName": ["", [Validators.required]]
});
}
public save(){
console.log(JSON.stringify(this.form.value));
}
当我运行上面的代码,它的一切好起来。我得到正确的名字和姓氏。
当我尝试向此代码添加操作栏时,会发生此问题。
app.component.html
<ActionBar title="New" class="action-bar">
<ActionItem text="save" (tap)="save()"></ActionItem>
</ActionBar>
<StackLayout [formGroup]="form">
<label text="Name"></label>
<TextField formControlName="Name"></TextField>
<label text="Last Name"></label>
<TextField formControlName="LastName"></TextField>
<button text="save" (tap)="save()"></button>
</StackLayout>
的app.component.ts保持不变。
当我运行此代码并点击stacklayout中的按钮时,我正确地得到名称和姓氏,但是当我点击ActionItem时,我得到一个空字符串,用于名称和姓氏。我错过了什么吗?
答
你的代码看起来很好 - 事实上,我已经用this test application对它进行了测试,并且一切按我的预期工作。
备注:如果在iOS上进行测试时请记住,如果后续控制台日志相同,则只能打印一次。 (this),所以可能是因为看起来事实上该操作完成时日志并未打印。
感谢尼克:)现在它工作。我的代码是在AppComponent中,所以我创建了另一个组件,在那里粘贴了我的代码,这很好。 app.component.html中的页面路由器插座能否成为我的代码之前无法工作的原因? –