Question

正如下面的代码所示，我将默认值设置为文本区域：

<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
     <div class="view">
            <div class="col">
                        <mat-form-field>
                            <textarea matInput value="Test..." formControlName="firstValue"></textarea>
                        </mat-form-field>
            </div>
            <button type="submit">Submit</button>
      </div>
</form>

然后我像这样初始化我的FormGroup和FormFields：

ngOnInit() {
 this.entryForm = new FormGroup({
   firstValue: new FormControl('')
 });
}

public onSubmit() {
  console.log(this.entryForm.value);
}

但是，当我单击“提交”时，firstValue的值似乎为空，而不是像dom元素中定义的那样是“ Test ...”值。

Answer 1

模板文件：您的formNameControl不正确：

您可以看看这个demo可能对您有帮助！

  <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
         <div class="lang">
                <div class="lang-col">
                      <textarea  formControlName="firstValue">   </textarea>

                </div>
                <button type="submit">Submit</button>
          </div>
    </form>

课程文件

entryForm: FormGroup;
  ngOnInit() {
    this.entryForm = new FormGroup({
      firstValue: new FormControl('Test...')
    });
  }

  onSubmit() {
    console.log(this.entryForm.value);
  }

或者您可以检查formControlName是否为空，然后设置默认值

  onSubmit() {

    if(this.entryForm.get('firstValue').value == "") {
      this.entryForm.patchValue({
        firstValue: 'Your defualt value goes here'
      }); 
    }
    console.log(this.entryForm.value);
  }

Answer 2

更改此：

firstValue: new FormControl('')

对此：

firstValue: new FormControl('Test...')

并从文本区域中删除属性值：

<textarea formControlName="firstValue"></textarea>

Here，您可以找到完整的工作示例（基于this答案）

注意：

这种方法的问题是Textarea的初始值将是“ Test ...”，这意味着用户将看到此类文本。

Answer 3

分配问题。您必须在类定义后分配您的输入表单的值，例如

export class MyComponent implements OnInit{
    public entryForm: FormGroup = new FormGroup({
        firsValue: new formControl('')
    });
    constructor()
    ngOnInit()
}

角度：在FormGroup中定义默认值输入FormField

3 个答案: