我正在构建一个表单,可以选择为您的图标选择颜色
一切正常,唯一的问题是颜色选择器不会影响我的反应形式的值。我尝试了很多方法来构建第二个输入字段,强制它的值,然后使用它,getter 函数,并将其用作表单值。
color!: string;
get colorChange() {
let newColor:string;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
return newColor = this.color
}
categoryForm!: FormGroup;
// eslint-disable-next-line @typescript-eslint/no-inferrable-types
isSubmitted: boolean = false;
constructor(private _fb: FormBuilder, private _categoriesService: CategoriesService, private toastr: ToastrService, private location: Location, private route:ActivatedRoute) { }
ngOnInit(): void {
this.categoryForm = this._fb.group({
name: ['', [Validators.required, Validators.minLength(6)]],
icon: ['', [Validators.required]],
color: [this.colorChange, [Validators.required]]
});
this._checkEditMode();
}
Run Code Online (Sandbox Code Playgroud)
<div class="category">
<h1 class="h1"> {{title}}</h1>
<div class="card">
<form class="my-3 mx-3" [formGroup]="categoryForm" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="exampleInputName" class="form-label">Category Name</label> …
Run Code Online (Sandbox Code Playgroud)