Question

我有一个组件，其接收AbstractControl为Input：

export class FormControlContainerComponent implements OnInit {
    @Input() control: AbstractControl;

    ngOnInit(): void {
        // this.control.root is a form
    }
}

我知道我可以使用control.root访问该表单。我如何收听从此组件提交的表单？有可能吗？

我正在使用angular 2.3。

Answer 1

我不认为这是可能的，我在源代码中找不到类似的东西，但我提出了这个想法。

您定义表单的位置：

<form [formGroup]="controlGroup (submit)="controlGroup.submit.emit(controlGroup.value)">

    <input [formControl]='firstNameControl' name="firstname">
 </form>

你班上的

;

export class MyComponent {

    private controlGroup = new FormGroup({});
    // this is your root controlGroup , how ever else you've created this is alright 

   constructor(){
     this.controlGroup.submit = new EventEmitter<any>();
     // we inject an event emitter inside the root controlGroup 


     this.controlGroup.submit.subscribe((data)=>{
        console.log('form is submitted with value ',data);
     });
   }
}

然后你可以这样做：

export class FormControlContainerComponent implements OnInit {
    @Input() control: AbstractControl;

    ngOnInit(): void {
        this.control.root.submit.subscribe((data)=>{
           console.log('form is submitted with value ',data);
        });
    }
}

显然，这看起来有点像黑客，但它没有任何伤害，首选的方法是定义一个从FormGroup扩展并提供此提交功能的新类，但我很懒惰做到这一点：D

收听Angular 2中组件提交的表单

1 个答案: