在 Angular 8 中,可以使用模板驱动表单或响应式表单来实现带有按钮的输入字段。下面是两个示例解决方法。
app.component.html:
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onButtonClick(value: string) {
console.log(value);
}
}
app.component.html:
app.component.ts:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myInput: ''
});
}
onButtonClick() {
console.log(this.myForm.value.myInput);
}
}
以上两种解决方法都使用了一个按钮来触发 onButtonClick 方法,并打印输入字段的值到控制台。你可以根据实际需求进行修改和扩展。