如何在应用程序的Angular Forms中使用表单控件输入制作通用组件 [英] How to make generic component with form control input for Angular Forms in app

问题描述

我为日期选择器创建了组件，希望在应用程序的许多其他组件中使用它.我遇到了一些问题，因为它不会更改父表单组控件的值.

I've created component for datepicker that I want to use in many other components in my application. I have some problems becouse it doesn't change value of parent form group control.

让我们看一下代码:

export class DatePickerComponent {
@ViewChild('input', {read: ElementRef, static: false}) inputRef: ElementRef;
@Input()
formName?: FormGroup;
@Input()
formControlName: any;

constructor() {
this.formControlName.setValue(['']);
}

onKeyPress = (event) => {
const pressedKey = event.keyCode;

if (
  pressedKey !== 8 &&
  pressedKey !== 9 &&
  pressedKey !== 13 &&
  ((pressedKey < 48 || pressedKey > 105) || (pressedKey > 57 && pressedKey < 96))
) {
  event.preventDefault();
}
}

onKeyUp = (event) => {
const pressedKey = event.keyCode;
const inputString: string = this.formControlName.value;

if (!inputString) {
  return;
}

if (inputString.length === 11) {
  this.inputRef.nativeElement.value = inputString.slice(0, -1);
  return;
}

if (pressedKey === 8 && (inputString.length === 3 || inputString.length === 6)) {
  const newValue = inputString.slice(0, -1);
  this.formControlName.setValue(newValue);
  this.inputRef.nativeElement.value = newValue;
} else if (inputString.length === 2 || inputString.length === 5) {
  const newValue = inputString + '/';
  this.formControlName.setValue(newValue);
  this.inputRef.nativeElement.value = newValue;
}
}

}

和模板:

<div [formGroup]="formName">
<input
class="form-control"
formControlName="{{formControlName}}"
placeholder="DD/MM/YYYY"
name="dp"
ngbDatepicker
#d="ngbDatepicker"
[minDate]="{year: 1930, month: 1, day: 1}"
(click)="d.toggle()"
(keydown)="onKeyPress($event)"
(keyup)="onKeyUp($event)">
</div>

所以我想在形式为 FormGroup 属性设置为X的父组件中使用它.要使用我的组件，我添加了< app-date-picker [formControlName] =出生日期" [formName] ="registerForm"></app-date-picker>

So I wanted to use it in parent component that is form with FormGroup property set to X. To use my component I've added <app-date-picker [formControlName]="birthDate" [formName]="registerForm"></app-date-picker>

也许我在父组件中做错了事

Maybe I did something wrong in parent component:

export class UserFormComponent implements OnInit {

@Input() isRegisterPage: boolean;
@Input() isProfilePage: boolean;
@Input() user: UserInfo;
registerForm: FormGroup;
birthDate: FormControl;
loading: boolean;
.e
.t
.c

如何使我的日期选择器正确重用?也许有人可以帮我吗?

How to make my datepicker reusable correctly? Maybe somone can help me?

仅带日期选择器的提琴(未用于父级形式):

Fiddle with only datepicker (not used in parent form): https://stackblitz.com/edit/angular-i47zuz-jj5glk?file=app/datepicker-popup.ts

推荐答案

您做错了！要使您的自定义组件与 FormControl 的表单一起使用，您应使其成为 FormControl ，为此，您需要实现 ControlValueAccessor 接口，因此您的组件将用作自定义的 FormControl ，您可以在此处了解如何操作-> ControlValueAccessor ，如果您在实现它时遇到问题，请告诉我，我可以提供进一步的帮助，但是请尝试首先自己实施，以更好地学习

you are doing it wrong !, to make your custom component work with forms as FormControl you should make it FormControl, to do so, you need to implement ControlValueAccessor interface, so your component would work as custom FormControl, you can read how to do it here -> ControlValueAccessor, if you have problems on implementing it let me know, I can provide further help, but try to implement it on your own first, to learn better

这篇关于如何在应用程序的Angular Forms中使用表单控件输入制作通用组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！