[解決済み] Angular(v2以降)のリアクティブフォームで無効なコントロールを見つける方法

質問

Angularで以下のようなリアクティブフォームを作成しています。

this.AddCustomerForm = this.formBuilder.group({
    Firstname: ['', Validators.required],
    Lastname: ['', Validators.required],
    Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
    Picture: [''],
    Username: ['', Validators.required],
    Password: ['', Validators.required],
    Address: ['', Validators.required],
    Postcode: ['', Validators.required],
    City: ['', Validators.required],
    Country: ['', Validators.required]
});

createCustomer(currentCustomer: Customer) 
{
    if (!this.AddCustomerForm.valid)
    {
        //some app logic
    }
}

this.AddCustomerForm.valid は false を返しますが、すべてうまくいっているように見えます。

コントロールコレクションのstatusプロパティのチェックで見つけようとしました。しかし、無効なものを見つけてユーザーに表示する方法はないでしょうか？

どのように解決するのですか？

単純にすべてのコントロールを繰り返し、ステータスを確認することができます。

    public findInvalidControls() {
        const invalid = [];
        const controls = this.AddCustomerForm.controls;
        for (const name in controls) {
            if (controls[name].invalid) {
                invalid.push(name);
            }
        }
        return invalid;
    }