获取Angular表单的HTML内容

Question

我有一个角度形式，如以下

<div #myForm [formGroup]="myForm">        
<select formControlName="productName" class="form-control">
<option value="">Select</option>
<option *ngFor="let item of productNames" [value]="item.value"
[textContent]="item.text"></option>
</select>
</div>
<button (click)="Print()">Print</button>

点击按钮，我想获得表单html，这样我就可以在其他地方使用它。因此，我使用表单引用来获得如下所示的innerHtml。

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-print-form',
templateUrl: './print-form.component.html',
styleUrls: ['./print-form.component.css']
})
export class PrintFormComponent implements OnInit {
myFormGrp: FormGroup;
productNames:  any[];
@ViewChild('myForm') myForm: ElementRef<HTMLDivElement>;
constructor(private formBuilder:FormBuilder) { }
ngOnInit(): void {
this.productNames = [
{text: "aaa", value: "1"},
{text: "bbb", value: "2"},
{text: "ccc", value: "3"},
{text: "ddd", value: "4"}
];
this.myFormGrp = this.formBuilder.group({
productName: new FormControl({ value: '3', disabled: false })
});
}
Print(): void {
console.log(this.myForm.nativeElement.innerHTML);
}
}

但是innerText不会返回下拉列表的选定值。有什么方法可以获得表单控件的选定值吗？

Answer 1

我看到您正在使用reactivform。您应该添加(ngSubmit)事件侦听器，如下所示：

<form [formGroup]="myForm" (ngSubmit)="print()">

此外，你的方法不应该使用大写字母(print() and not Print()(

然后你可以检索这样一个表单的值：

console.log(this.myForm.get('the_value_to_retrieve').value);

棱角分明的文档非常详细：https://angular.io/guide/reactive-forms