title: angular component with multiple inputs and validation (required)
body: <p>I want to create a custom component with multiple input controlls which I can use in other components forms including the validation. The only examples I could find show how to create a simple component with ONE input and a custom validator. But I was not possible to create a component with two or more inputs like</p>
  
  <pre><code>@Component({
      selector: 'stationDefaultProperties',
      template: '&lt;div&gt;&lt;span&gt;Name:&lt;/span&gt;
        &lt;input [(ngModel)]="values.Name" (change)="onChanges()" name="name"  required maxlength="200" minlength="2" type="text"&gt;
        &lt;span&gt;Beschreibung:&lt;/span&gt;
        &lt;textarea [(ngModel)]="values.Beschreibung" name="beschreibung" minlength="4" type="text" rows="3"&gt;&lt;/textarea&gt;&lt;/div&gt;',
      providers: [
          {
              provide: NG_VALUE_ACCESSOR,
              useExisting: forwardRef(() =&gt; StationDefaultPropertiesComponent),
              multi: true
          }
      ]
  })
  export class StationDefaultPropertiesComponent implements ControlValueAccessor {
      @ViewChild('cF') public userFrm: NgForm;
  
      public values: my.Container.IStationDefaultProperties = {
          Aktiv: false,
          Beschreibung: "",
          Name: "",
          StationId: 0
      };
  
      constructor() { }
  
      public writeValue(value: my.Container.IStationDefaultProperties): void {
          if (value) {
              this.values = value;
              console.log(value);
          }
      }
  
      public onChanges(): void {
          this.propagateChange(this.values);
      }
  
      public registerOnChange(fn): void {
          this.propagateChange = fn;
      }
  
      public registerOnTouched(fn): void { }
  
      // the method set in registerOnChange to emit changes back to the form
      private propagateChange = (_: any) =&gt; { };
  }
  </code></pre>
  
  <p>I am using the "ControlValueAccessor" so that I can call my component with "[(ngModel)]"</p>
  
  <pre><code>&lt;form #f="ngForm" name="f" novalidate&gt;
  &lt;stationDefaultProperties name="stdProperties" [(ngModel)]="viewModel &amp;&amp; viewModel.DefaultProperties"&gt;&lt;/stationDefaultProperties&gt;
   {{f.valid}} =&gt; is ALLWAYS TRUE
  &lt;/form&gt;
  </code></pre>
  
  <p>but the problem is I don't know how to implement the required validator for only one of my inputs and a minlength validator for both of them. The form is allways valid on start, but it shouldn't because there is no value in the required field.</p>