Angular 4 form validation on multiple fields

Question

EDIT: What I want to achieve is a validation on one single formControl and not the whole form. The validator should check all atom fields like house number, street etc. and then invalidate the google maps input control.

---

I am programming a form with Google Maps Autocomplete. The user should enter a address into a input field that triggers the Google Maps autocomplete logic. When an address is selected the callback function selects the street, house number etc. and uses the API result to fill in the required address data fields. The other form elements are displayed but readonly so we always get valid data and can perform validation on the inputs.

The problem is that my validator doesn't trigger the input field. The main input field is always valid and doesn't get the ng-invalid class.

@Component({
  selector: 'my-app',

  styles: [`
    .ng-valid {
      border:#0ff;
    }

    .ng-invalid {
      border:#f00;
    }
  `],
  template: `

  <form [formGroup]="testForm">
                <input type="text" formControlName="address">
                <input type="text" formControlName="tel">
                <input type="text" formControlName="mail">
            </form>
  `
})
export class AppComponent {
  testForm:FormGroup;


  constructor(private fb: FormBuilder) {
    this.testForm = this.fb.group({
            address:['', myValidator],
            tel:[''],
            mail:['']
        }, {
            validator: myValidator("tel", "mail")
        });
  }
}

export const myValidator = (field1, field2): ValidatorFn => (control: AbstractControl) => {
        if(control.get(field1).value=="test" && control.get(field2).value=="test2") {
            return null;
        }
        return { myValidator: { valid: false } };
    }

I have made a punker of it so you can see it in action: https://plnkr.co/edit/2kncVT6thQTU1HMCmyTy?p=preview

Solution 1

I think your validation is correct you just have to show the message for the validation like this

<form [formGroup]="testForm">
    <input type="text" formControlName="address">
    <input type="text" formControlName="tel">
    <input type="text" formControlName="mail">
</form>
<span *ngIf="!testForm.errors.myValidator">Incorrect<span>

and in your validation use this

if(control.get(field1).value=="test" && control.get(field2).value=="test2") {
        return { myValidator: true  }
    }
    return  { myValidator: false  };

Solution 2

Your form and validation seems to be working. I updated your plunker and added two divs to your template:

<form [formGroup]="testForm">
    <input type="text" formControlName="address">
    <input type="text" formControlName="tel">
    <input type="text" formControlName="mail">
</form>
<div *ngIf="testForm.valid">Your form is valid! yay!</div>
<div *ngIf="testForm.invalid">Your form is invalid!</div>

Here's the updated plunk:

https://plnkr.co/edit/wqMdBQFvj2pIjJkWeCoV?p=preview

Comments

[Cedric]

Damn, found my error. As I apply the validator not only on the formControl but the whole formGroup, it invalidates the formGroup.

[sax]

Is it possible to implement the same using template-driven forms?