How to Get Value of a Formcontrol in Angular4

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.

2

3 Answers

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

1

Having validation at the FormGroup level in the component

this.loginForm = new FormGroup({
  'email': new FormControl('', Validators.compose([
    Validators.required,
    Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
  ])),

I was able to pluck the email value like this in my function:

email = this.loginForm.value.email

Worked for me - hope it helps you.

Have a look for high level implementation and utilize few steps:

StackBlitz URL:

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Sarah Jenkins

Sarah Jenkins

Senior Technology Editor & AI Specialist

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.

Share this article
Twitter Facebook Pinterest