Use disable with model-driven form
Yea you're right that the problem is because you are referencing a variable (this.form) when it's not initiated yet. Lucky, in your case, you don't really need to refer to the form group in your val2 form control. Your code can be rewritten as followed:
let val1Control = this.formBuilder.control('', Validators.required);this.form = this.formBuilder.group({ val1: val1Control , val2: [{value:'', disabled: val1Control.valid}]});However, this block only initiates the disabled value of val2 control without monitoring val1Control's validity. To do that, you will need to subscribe to val1Control.statusChanges:
let val1Control = this.formBuilder.control('', Validators.required);let val2Control = this.formBuilder.control({value:'', disabled: !val1Control.valid});this.form = this.formBuilder.group({ val1: val1Control, val2: val2Control})val1Control.statusChanges.subscribe((newStatus) => { if (val1Control.valid) { val2Control.enable(); } else { val2Control.disable(); }});Here's the working plunker: http://plnkr.co/edit/kEoX2hN9UcY4yNS3B5NF