How to get value of a FormControl in Angular4

Question

I have some experience in Angular4, but I just inherited a piece of code that uses FormControls, and I don't know how to work with them. I am setting up a comments textarea that is required if the value of isRegulatoryAuditRequired equals false. I've got the required field working, but I need to display the message 'Comments required' if value is false and the form is submitted. Here is my HTML, with two radio buttons, a textarea and a label for the message:

<div class="btnWrapper">   <div class="leftBtn">     <span class="col-xs-12 no-padding">       <label>         <input type="radio" id="radio1" class="app-input-radio" name="isRegulatoryAuditRequired" [value]="true"                [checked]="isRegulatoryAuditRequired==true" formControlName="isRegulatoryAuditRequired" />         <span class="app-input-radio pull-left"></span>         <span class="plx5 pull-left radioText ">Yes</span>       </label>     </span>   </div>   <br />   <div class="rightBtn">     <span class="col-xs-12 no-padding">       <label>         <input type="radio" id="radio2" class="app-input-radio" name="isRegulatoryAuditRequired" [value]="false"                [checked]="isRegulatoryAuditRequired==false" formControlName="isRegulatoryAuditRequired" />         <span class="app-input-radio pull-left"></span>         <span class="plx5 pull-left radioText ">No</span>       </label>     </span>   </div> </div> <div class="row mbx20">   <div class="col-sm-4">     <div>       <label>Why is the regulatory audit being performed or provide additional comment?</label>       <div>         <textarea id="comments" name="Text1" [required]="isRegulatoryAuditRequired==false" cols="100" rows="2" formControlName="comments"></textarea>         <label *ngIf="commentsRequired('comments')" style="color:red;font-weight:bold">Comments required</label>       </div>     </div>   </div> </div> 

I need to evaluate the value of the 'isRegulatoryAuditRequired' and 'comments' FormControls to see if I should display the 'Comments required' message. Here is the method I'm trying to use, but it isn't working:

commentsRequired(controlName: string) {   const control = (<FormControl>this.rotationForm.controls[controlName]);   const isRegulatoryAuditRequired = (<FormControl>this.rotationForm.controls['isRegulatoryAuditRequired']);   if (isRegulatoryAuditRequired.value === false && control.value === '' && this.formSubmitAttempt) {     return true;   } else {     return false;   } } 

The value of 'isRegulatoryAuditRequired.value' and 'control.value' print to the console as null, which therefore doesn't display the message. How do I retrieve these values? Any help will be appreciated.

Answer 1

you can do this.rotationForm.get('comments').value this will give you the value of the formControl and then you can check on the length.

doing this this.rotationForm.value.comments will work too BUT NOT for disabled fields, to get the value of the DISABLED fields use the this.rotationForm.get('comments').value