如何在Angular4中获取FormControl的值 [英] How to get value of a FormControl in Angular4

问题描述

我对Angular4有一定的经验，但是我只是继承了一段使用FormControls的代码，而且我不知道如何使用它们.我正在设置一个注释文本区域，如果isRegulatoryAuditRequired的值等于false，则该文本区域是必需的.我有必填字段，但是如果value为false并且提交了表单，则需要显示消息"Comments required".这是我的HTML，带有两个单选按钮，一个文本区域和一条消息标签:

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>
        </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>

我需要评估"isRegulatoryAuditRequired"和评论" FormControls的值，以查看是否应显示需要评论"消息.这是我要使用的方法，但是不起作用:

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;
        }
    }

'isRegulatoryAuditRequired.value'和'control.value'的值以null的形式打印到控制台，因此不会显示该消息.如何获取这些值?任何帮助将不胜感激.

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.

推荐答案

您可以执行this.rotationForm.get('comments').value这将为您提供formControl的值，然后您可以检查其长度.

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.

执行此this.rotationForm.value.comments对于 disabled 字段，但不能起作用，以获得 的值禁用 字段使用this.rotationForm.get('comments').value

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

这篇关于如何在Angular4中获取FormControl的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！