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

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 元素中定义的一样。

Answer 1

改变这个：

firstValue: new FormControl('')

对此：

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

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

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

在这里，您可以找到一个完整的工作示例（基于此答案）

笔记：

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

Answer 2

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

你可以看看这个演示可能对你有帮助！

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

作业中的问题。你必须在类定义之后分配你的输入表单的值，像这样

export class MyComponent implements OnInit{

    public entryForm: FormGroup = new FormGroup({

        firsValue: new formControl('')

    });

    constructor()

    ngOnInit()

}