fix(angular): apply validation classes properly

* fix(angular): add validation classes to ion-item

* fix(inputs): focus handling

fixes #17171
fixes #16052
fixes #15572
fixes #16452
fixes #17063

angular/test/test-app/src/app/app-routing.module.ts

@@ -17,10 +17,12 @@ import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-
 import { ViewChildComponent } from './view-child/view-child.component';
 import { ProvidersComponent } from './providers/providers.component';
 import { SlidesComponent } from './slides/slides.component';
+import { FormComponent } from './form/form.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
   { path: 'inputs', component: InputsComponent },
+  { path: 'form', component: FormComponent },
   { path: 'modals', component: ModalComponent },
   { path: 'view-child', component: ViewChildComponent },
   { path: 'providers', component: ProvidersComponent },

angular/test/test-app/src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -25,6 +26,7 @@ import { NavComponent } from './nav/nav.component';
 import { ViewChildComponent } from './view-child/view-child.component';
 import { ProvidersComponent } from './providers/providers.component';
 import { SlidesComponent } from './slides/slides.component';
+import { FormComponent } from './form/form.component';
 
 @NgModule({
   declarations: [
@@ -48,12 +50,14 @@ import { SlidesComponent } from './slides/slides.component';
     NavComponent,
     ViewChildComponent,
     ProvidersComponent,
-    SlidesComponent
+    SlidesComponent,
+    FormComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
+    ReactiveFormsModule,
     IonicModule.forRoot(),
   ],
   entryComponents: [

angular/test/test-app/src/app/form/form.component.html

@@ -0,0 +1,76 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Forms test
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <form [formGroup]="profileForm">
+    <ion-list>
+
+      <ion-item>
+        <ion-label>DateTime</ion-label>
+        <ion-datetime formControlName="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Select</ion-label>
+        <ion-select formControlName="select">
+          <ion-select-option value="">No Game Console</ion-select-option>
+          <ion-select-option value="nes">NES</ion-select-option>
+          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+          <ion-select-option value="ps">PlayStation</ion-select-option>
+          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+          <ion-select-option value="snes">SNES</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Toggle</ion-label>
+        <ion-toggle formControlName="toggle" slot="end"></ion-toggle>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Input (required)</ion-label>
+        <ion-input formControlName="input"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Input</ion-label>
+        <ion-input formControlName="input2"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Checkbox</ion-label>
+        <ion-checkbox formControlName="checkbox" slot="start"></ion-checkbox>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Range</ion-label>
+        <ion-range formControlName="range"></ion-range>
+      </ion-item>
+
+    </ion-list>
+    <p>
+      Form Status: <span id="status">{{ profileForm.status }}</span>
+    </p>
+    <p>
+      Form Status: <span id="data">{{ profileForm.value | json }}</span>
+    </p>
+    <ion-button type="submit" [disabled]="!profileForm.valid">Submit</ion-button>
+
+  </form>
+  <ion-list>
+    <ion-item>
+      <ion-label>Outside form</ion-label>
+      <ion-toggle [formControl]="outsideToggle"></ion-toggle>
+      <ion-note slot="end">{{outsideToggle.value}}</ion-note>
+    </ion-item>
+  </ion-list>
+  <p>
+    <ion-button (click)="setValues()" id="set-button">Set values</ion-button>
+  </p>
+</ion-content>

angular/test/test-app/src/app/form/form.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+})
+export class FormComponent {
+
+  profileForm: FormGroup;
+  outsideToggle = new FormControl(true);
+
+  constructor(fb: FormBuilder) {
+    this.profileForm = fb.group({
+      datetime: ['2010-08-20', Validators.required],
+      select: [undefined, Validators.required],
+      toggle: [false],
+      input: ['', Validators.required],
+      input2: ['Default Value'],
+      checkbox: [false],
+      range: [20, Validators.min(10)],
+    }, {updateOn: 'blur'});
+  }
+
+  setValues() {
+    this.profileForm.patchValue({
+      datetime: '2010-08-20',
+      setValue: 'nes',
+      toggle: true,
+      input: 'Some value',
+      input2: 'Another values',
+      checkbox: true,
+      range: 50
+    });
+  }
+
+}

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -12,6 +12,11 @@
           Inputs test
         </ion-label>
       </ion-item>
+      <ion-item routerLink="/form">
+        <ion-label>
+          Form test
+        </ion-label>
+      </ion-item>
       <ion-item routerLink="/modals">
         <ion-label>
           Modals test