如何在 Angular4 中获取 FormControl 的值答案

【问题标题】：How to get value of a FormControl in Angular4如何在 Angular4 中获取 FormControl 的值
【发布时间】：2018-09-10 15:19:38
【问题描述】：

我有一些Angular4的经验，但是我只是继承了一段使用FormControls的代码，我不知道如何使用它们。如果 isRegulatoryAuditRequired 的值等于 false，我正在设置所需的 cmets textarea。我已经完成了必填字段，但如果值为 false 并且提交了表单，我需要显示消息“需要评论”。这是我的 HTML，带有两个单选按钮、一个文本区域和一个消息标签：

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

我需要评估 'isRegulatoryAuditRequired' 和 'cmets' FormControls 的值，以查看是否应该显示“需要评论”消息。这是我正在尝试使用的方法，但它不起作用：

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，因此不会显示消息。如何检索这些值？任何帮助将不胜感激。

【问题讨论】：

您是否在模板中的某处定义<div [formGroup]="rotationForm">Form content here</div> ？
是

标签： angular

【解决方案1】：

查看高级实现并利用几个步骤：

StackBlitz 网址：https://stackblitz.com/edit/angular-kqz4nw

【讨论】：

感谢您的意见！我回家后会测试它，如果它有效，我会检查答案。
这个答案也帮我解决了问题。谢谢你。我希望我能检查两个答案！
你能把你的代码复制到这里吗？该网站说：“哎呀！找不到您请求的页面。”

【解决方案2】：

你可以 this.rotationForm.get('comments').value 这会给你 formControl 的值，然后你可以检查长度。

这样做this.rotationForm.value.comments 对 disabled 字段也可以但不工作，以获取 的值DISABLED 字段使用this.rotationForm.get('comments').value

【讨论】：

谢谢！试图检索这些值让我很不舒服！

【解决方案3】：

在组件的 FormGroup 级别进行验证

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-.]+$')
  ])),

我能够在我的函数中像这样提取电子邮件值：

电子邮件 = this.loginForm.value.email

为我工作 - 希望对你有所帮助。

【讨论】：