CODEWITHSUNDEEP
angular
Pismotality
Pismotality

Reputation: 2289

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.

Upvotes: 36

Views: 202559

Answers (3)

PaperinFlames
PaperinFlames

Reputation: 952

You can get in this two ways:

this.yourFormName.get('yourFormControlName').value
this.yourFormName.controls['yourFormControlName'].value

Upvotes: 1

Nadhir Falta
Nadhir Falta

Reputation: 5267

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

Upvotes: 81

cinerama
cinerama

Reputation: 57

Having validation at the FormGroup level in the component

this.loginForm = new FormGroup({
  'email': new FormControl('example@example.com', 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.

Upvotes: 1

Related Questions