在Angular 8中,可以使用模板驱动表单或响应式表单来设置输入验证。下面是一个示例,展示了如何根据下拉选择设置输入验证。
模板驱动表单示例:
export class AppComponent {
selectedOption: string;
inputValue: string;
validateInput() {
if (this.selectedOption === 'option1' && !this.inputValue) {
// 输入验证失败
console.log('Input validation failed');
} else {
// 输入验证通过
console.log('Input validation passed');
}
}
}
响应式表单示例:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
selectedOption: '',
inputValue: ''
});
}
validateInput() {
if (this.myForm.get('selectedOption').value === 'option1' && !this.myForm.get('inputValue').value) {
// 输入验证失败
console.log('Input validation failed');
} else {
// 输入验证通过
console.log('Input validation passed');
}
}
}
这是一个基本的示例,你可以根据你的需求进行扩展和修改。