angular 2 group validation
<p>Given simple registration form:</p>
<pre><code>this.registerForm = this.formBuilder.group({
    email:['', Validators.compose([
    Validators.required,
    Validators.pattern('.+@.+\..+'),
    ]), this.validators.isTaken],
    matchingPassword: this.formBuilder.group({
    password: ['', Validators.compose([
            Validators.required,
            Validators.maxLength(30),
            Validators.minLength(8)
        ])],
    passwordConfirmation: ['', Validators.compose([
            Validators.required,
        ])]
    }, {validator: this.validators.match})
})
</code></pre>
<p>I'm trying to validate password confirmation match so I'm applying match validator to form group. But now I'm facing a situation when the field itself displayed as valid (with green border because all its validators are passing) but group validator are not and I need them to be shown as red.</p>
<p><a href="https://i.stack.imgur.com/lEzE1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lEzE1.png" alt="enter image description here" /></a></p>
<p>So should I change ng-valid to ng-invalid manually or there are some trick to fix this in better way?</p>