Question

我在组件上创建了基于模型的表单，但是提交按钮放在不同的组件上。

现在按下按钮时会触发此功能：

@Input()
form: any;
...
if(this.form.valid)             
   this.saveDefinition();

但是如果表单无效，我想用表单“发送信号”回到我的组件。如果表单无效，则应突出显示所有无效字段（就像在同一组件上提交表单时一样）。

我已经搜索了一段时间，我甚至无法知道这是否可行，如果有可能你们可以帮助我继续前行吗？

感谢

Answer 1

您可以使用服务，如下所示：

form.service.ts文件

@Injectable() 
export class FormService {
     onFormSubmitted = new EventEmitter<any>();
}

然后在appModule提供程序appModue.ts文件中注册此服务

providers: [
  ...
  FormService
  ...
]

firstComponent.ts文件

@Component({
  ...
});
export class FirstComponent implements{

    constructor( public formService:FormService) {}

    onFormSubmit(formData:any) {
       this.formService.onFormSubmitted.emit(formData);
    }    
}

secondComponent.ts文件

export class SecondComponent implements OnInit{

   constructor ( public formService:FormService ) {}

   ngOnInit() {
      this.formService.onFormSubmitted.subscribe( (formData : any ) => {
         this.onFormSubmit(formData);
      })
   }

   onFormSubmit(formData : any) {
       // your logic for submitting the form
   }
}

第一个和第二个组件具有相同的FormService实例，因此它们具有相同的eventEmitter实例，第一个组件在表单提交时发出事件，第二个组件正在侦听它。它被称为使用服务的跨组件通信。

在不同的组件上提交表单

1 个答案: