Question

我在shared文件夹中有四个组件，它们可以可重复使用：

关于utils文件夹中的组件：

这些是“哑巴” 组件，可用于创建表单。

关于forms文件夹中的组件：

这些是通过utils文件夹的“哑” 组件创建的特定表单。

为此，我尝试创建可重用组件，但它会生成以下error：

core.js:6272 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

core.js:6272 ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

      Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

1）我在做什么错？ 2）我要尝试做的所有这些架构都是错误的吗？

组件示例：

   <app-form [formGroup]="sendMessageForm" [autocomplete]="'off'" [padding]="'0 1.3rem'">
        <app-input
            [formControlName]="message"
            [style]="'border-stack-big'"
            [type]="'text'"
            [placeholder]="'Type a message'"
            [alt]="'Type a message'"
            [minlength]="0"
            [maxlength]="105"
            [required]="true"
        ></app-input>
    </app-form>

    export class SendMessageFormComponent implements OnInit {
        value: string;
        sendMessageForm = new FormGroup({
            message: new FormControl(this.value, [Validators.required, Validators.minLength(0), Validators.maxLength(105)]),
        });

        constructor() {}

        ngOnInit(): void {}
    }

表格组件：

<form [formGroup]="formGroup" [style.padding]="padding" [attr.autocomplete]="autocomplete" novalidate>
    <ng-content></ng-content>
</form>

export class FormComponent implements OnInit {
    @Input() formGroup: FormGroup;
    @Input() autocomplete: boolean;
    @Input() padding: string;

    constructor() {}

    ngOnInit(): void {}
}

输入组件：

<input
    [formControlName]="formControlName"
    [attr.style]="style"
    [attr.type]="type"
    [attr.placeholder]="placeholder"
    [attr.alt]="alt"
    [attr.minlength]="minlength"
    [attr.maxlength]="maxlength"
    [attr.readonly]="readonly"
    [attr.required]="required"
    (click)="onclick($event)"
    (blur)="onblur($event)"
    (keypress)="onkeypress($event)"
/>

export class InputComponent implements OnInit {
    @Output() eventClick = new EventEmitter<MouseEvent>();
    @Output() eventBlur = new EventEmitter<MouseEvent>();
    @Output() eventKeypress = new EventEmitter<IKeypressEvent>();
    @Input() formControlName: FormControlName;
    @Input() style: string;
    @Input() type: string;
    @Input() placeholder: string;
    @Input() alt: string;
    @Input() value: string;
    @Input() minlength: number;
    @Input() maxlength: number;
    @Input() readonly: string;
    @Input() required: string;

    constructor() {}

    ngOnInit(): void {}

    onclick(event: MouseEvent): void {
        this.eventClick.emit(event);
    }

    onblur(event: MouseEvent): void {
        this.eventBlur.emit(event);
    }

    onkeypress(event: KeyboardEvent): void {
        this.eventKeypress.emit({ evt: event, value: this.value });
    }
}

Answer 1

我设法做到了...

我做了一些测试，并分析了以下内容：

FormControlName的相同命名法不能重复。
FormGroup 应同时传递给<app-form>组件和<app-input>。
还需要将整个表格传递到<app-input>。

因此如下：

发送邮件表格：

<app-form [formGroup]="sendMessageForm">
    <app-input
        [fmGroup]="sendMessageForm"
        [fmControlName]="'message'"
    ></app-input>
</app-form>

export class SendMessageFormComponent implements OnInit {
    sendMessageForm = this.formBuilder.group({
        message: ['', [Validators.required, Validators.minLength(0), Validators.maxLength(105)]],
    });

    constructor(protected formBuilder: FormBuilder) {}

    ngOnInit(): void {}
}

应用程序表单：

<form [formGroup]="formGroup"  novalidate>
    <ng-content></ng-content>
</form>

export class FormComponent implements OnInit {
    @Input() formGroup: FormGroup;

    constructor() {}

    ngOnInit(): void {}
}

应用输入：

<ng-container [formGroup]="fmGroup">
    <input [formControlName]="fmControlName"/>
</ng-container>

export class InputComponent implements OnInit {
    @Input() fmGroup: FormGroup;
    @Input() fmControlName: FormControlName;

    constructor() {}

    ngOnInit(): void {}
}

现在我不能说这是否正确，是否会引起某种问题。

如何创建动态反应形式？

1 个答案: