異なるコンポーネントにフォームを送信する

Question

コンポーネントにモデルベースのフォームを作成しましたが、送信ボタンは別のコンポーネントに配置されています。あなたがボタンを押したときに

現在、この機能はtriggerdです：

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

私は、フォームが無効な場合、フォームに戻って私のコンポーネントに「信号を送信」し​​たいが。フォームが無効な場合は、すべての無効なフィールドを強調表示する必要があります（同じコンポーネントでフォームを送信する場合と同じです）。

私はしばらく検索しましたが、これが可能かどうかを知ることさえできません。もし可能であれば、私の道を手伝ってもらえますか？

おかげ

Answer 1

あなたは次のように、サービスを使用することができます。

form.service.tsは

providers: [ 
    ... 
    FormService 
    ... 
] 

ファイルappModuleプロバイダappModue.tsでこのサービスを登録し、その後

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

を提出

firstComponent.tsファイル

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

    constructor(public formService:FormService) {} 

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

secondComponent.tsフォームがあるとき第一成分がイベントを発する第1および第2の成分がFormServiceの同じインスタンスが、それらが持つEventEmitterの同じインスタンスを有する

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 
    } 
} 

ファイル2番目のコンポーネントはそれを聞いています。 サービスを使用して呼び出されるクロスコンポーネント通信。