Question

我使用Angular6。我有以下属性指令。我在此指令中定义了一个事件单击。

@Directive({
selector: "[pa-attr]"

})
export class PaAttrDirective {

    @Input("pa-attr")
    @HostBinding("class")
    bgClass: string;

    @Input("pa-product")
    product: Product;

    @Output("pa-category")
    click = new EventEmitter<string>();

    @HostListener("click")
    triggerCustomEvent() {
        console.log("triggercustomevent")
        if (this.product != null) {
            this.click.emit(this.product.category);
        }
    }


}

我有以下四个字段的表格。我想在点击输入字段时在上述指令中触发事件

   <form novalidate [formGroup]="form" (ngSubmit)="submitForm(form)">

        <div class="form-group" *ngFor="let control of form.productControls">
            <label>{{control.label}}</label>
            <input class="form-control" 
                [(ngModel)]="newProduct[control.modelProperty]"
                name="{{control.modelProperty}}"
                (pa-product)="newProduct"
                formControlName="{{control.modelProperty}}" 
(pa-category)="newProduct[control.modelProperty]=$event"


                />
            <ul class="text-danger list-unstyled"
                    *ngIf="(formSubmitted || control.dirty) && !control.valid">
                <li *ngFor="let error of control.getValidationMessages()">
                    {{error}}
                </li>
            </ul>
        </div>


         <div class="bg-primary p-a-1 p-attr"  > Total Price ccc {{totalPrice1}} </div>

        <button class="btn btn-primary" type="submit"
            [disabled]="formSubmitted && !form.valid"
            [class.btn-secondary]="formSubmitted && !form.valid">
                Create
        </button>
    </form>

我以这种形式在输入字段中定义

(pa-category)="newProduct[control.modelProperty]=$event"

我也初始化产品

(pa-product)="newProduct"

在指令中，我有

@Output("pa-category")
click = new EventEmitter<string>();

如何在每个输入字段表单中触发事件？

Answer 1

您已将product定义为pa-attr指令内的输入，但是您将其视为模板中的输出。您需要将(pa-product)="newProduct"更改为[pa-product]="newProduct"。

您还忘记了在input元素上使用指令选择器。

角度6事件不会在表单中触发

1 个答案: