如何在angular2中获取FormControl的值
How to get the value of a FormControl in angular2
我有以下表单和一个包含 FormGroups 的 FormArray
<form [formGroup]="screenForm" novalidate>
<div formArrayName="iPhoneScreenshots" class="row">
<div *ngIf="screenForm.controls.iPhoneScreenshots?.length > 0">
{{screenForm.controls.iPhoneScreenshots?.length }}
<div *ngFor="let url of screenForm.controls.iPhoneScreenshots.controls; let i=index">
<div [formGroupName]="i">
<input class="form-control" formControlName="url">
<img src="{{app.screenshotUrls[i]}}" class="rounded img-fluid app-screen" style="height:200px"/>
</div>
</div>
</div>
</div>
</form>
url 值来自通过 API 填充的数组
在回调中我设置了值:
private setScreenShots(app: ItunesApp): void {
if (app.hasOwnProperty('screenshotUrls')) {
const screenShots = app.screenshotUrls.map(url => {
return this.fb.group({
url: [url, Validators.required]
});
}
);
const screenShotsArray = this.fb.array(screenShots);
this.screenForm.setControl('iPhoneScreenshots', screenShotsArray);
}
}
初始数组为空
private createForm() {
this.appSiteForm = this.fb.group({
title: ['', Validators.required]
});
this.screenForm = this.fb.group({
iPhoneScreenshots: this.fb.array([]),
});
}
我觉得这行代码很奇怪
img src="{{app.screenshotUrls[i]}}"
我这样做是因为 url.value() 或 url.get('value') 会引发错误。
那么如何访问表单控件的值?
试试这个:
screenForm.get('url').value
如果这不起作用,我将不得不查看您的整个表单生成器以进一步提供帮助。
你可以尝试从url组
获取控制权
<div *ngFor="let urlGroup of screenForm.controls.iPhoneScreenshots.controls; let i=index">
<div [formGroupName]="i">
<input class="form-control" formControlName="url">
<img [src]="urlGroup.get('url').value" />
</div>
</div>
我有以下表单和一个包含 FormGroups 的 FormArray
<form [formGroup]="screenForm" novalidate>
<div formArrayName="iPhoneScreenshots" class="row">
<div *ngIf="screenForm.controls.iPhoneScreenshots?.length > 0">
{{screenForm.controls.iPhoneScreenshots?.length }}
<div *ngFor="let url of screenForm.controls.iPhoneScreenshots.controls; let i=index">
<div [formGroupName]="i">
<input class="form-control" formControlName="url">
<img src="{{app.screenshotUrls[i]}}" class="rounded img-fluid app-screen" style="height:200px"/>
</div>
</div>
</div>
</div>
</form>
url 值来自通过 API 填充的数组 在回调中我设置了值:
private setScreenShots(app: ItunesApp): void {
if (app.hasOwnProperty('screenshotUrls')) {
const screenShots = app.screenshotUrls.map(url => {
return this.fb.group({
url: [url, Validators.required]
});
}
);
const screenShotsArray = this.fb.array(screenShots);
this.screenForm.setControl('iPhoneScreenshots', screenShotsArray);
}
}
初始数组为空
private createForm() {
this.appSiteForm = this.fb.group({
title: ['', Validators.required]
});
this.screenForm = this.fb.group({
iPhoneScreenshots: this.fb.array([]),
});
}
我觉得这行代码很奇怪
img src="{{app.screenshotUrls[i]}}"
我这样做是因为 url.value() 或 url.get('value') 会引发错误。
那么如何访问表单控件的值?
试试这个:
screenForm.get('url').value
如果这不起作用,我将不得不查看您的整个表单生成器以进一步提供帮助。
你可以尝试从url组
获取控制权<div *ngFor="let urlGroup of screenForm.controls.iPhoneScreenshots.controls; let i=index">
<div [formGroupName]="i">
<input class="form-control" formControlName="url">
<img [src]="urlGroup.get('url').value" />
</div>
</div>