Disabled input validation in dynamic form
<p>I have a dynamic form (made an example using angular.io dynamic form live example plunkr) and I want to disable an input of this form, to display it as a readonly information.</p>

<p>So I decided to add <code>disabled</code> attribute to the question model:</p>

<pre><code>export class QuestionBase&lt;T&gt;{
  value: T;
  key: string;
  label: string;
  required: boolean;
  order: number;
  controlType: string;
  disabled?:boolean;

  constructor(options: {
      value?: T,
      key?: string,
      label?: string,
      required?: boolean,
      order?: number,
      controlType?: string,
      disabled?:boolean
    } = {}) {
    this.value = options.value;
    this.key = options.key || '';
    this.label = options.label || '';
    this.required = !!options.required;
    this.order = options.order === undefined ? 1 : options.order;
    this.controlType = options.controlType || '';
    this.disabled = options.disabled || false;
  }
}
</code></pre>

<p>And then I bind disabled to the input:</p>

<pre><code>&lt;input *ngSwitchCase="'textbox'" [disabled]="question.disabled" [formControlName]="question.key"
            [id]="question.key" [type]="question.type"&gt;
</code></pre>

<p>I get a warning, and the input is not disabled:</p>

<pre><code>It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
      when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
      you. We recommend using this approach to avoid 'changed after checked' errors.

      Example: 
      form = new FormGroup({
        first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
        last: new FormControl('Drew', Validators.required)
      });
</code></pre>

<p>So I did like it's written in the warning and I get a problem, validator seems to not like the disabled field, even if it's not marked as required.</p>

<p>Here is what I changed the new <code>QuestionControlService</code> class:</p>

<pre><code>@Injectable()
export class QuestionControlService {
  constructor() { }

  toFormGroup(questions: QuestionBase&lt;any&gt;[] ) {
    let group: any = {};

    questions.forEach(question =&gt; {
      group[question.key] = question.required ? new FormControl({value: question.value || '', disabled: question.disabled}, Validators.required)
                                              : new FormControl({value: question.value || '', disabled: question.disabled});
    });
    return new FormGroup(group);
  }
}
</code></pre>

<h3>Problem</h3>

<p>The <code>disabled test</code> field is disabled, but not valid, which should not be possible since it has not been modified at all.</p>

<p>Plunkr for my issue: <a href="http://plnkr.co/edit/qSDnD2xWWUwafyToDNX1?p=preview" rel="nofollow">http://plnkr.co/edit/qSDnD2xWWUwafyToDNX1?p=preview</a></p>