表单控件的默认值不显示

时间:2019-06-10 14:37:51

标签: angular angular-reactive-forms

我正在尝试为整个项目中的任何formcontrol赋予默认值,但它不会显示在html中。这是一个示例:

这是我的ts文件

 import {FormBuilder, FormGroup, FormArray, Validators, NgForm} from   
 '@angular/forms';

template = this.fb.group({
templateName: ['name', [Validators.required]]})
constructor(private fb: FormBuilder){}

我的html

  <form [formGroup]="template" #formDirective="ngForm" class="col-lg-4 col-md-4 col-con">

          <input matInput placeholder="Template Name"
   maxlength="255" formControlName="templateName" value=""
                 required>
   </form>

我的模块

    imports: [
BrowserModule,
CommonModule,
FormsModule,
HttpClientModule,
AppRoutingModule,
RouterModule,
ReactiveFormsModule]

2 个答案:

答案 0 :(得分:1)

只需删除此属性value=""

 <form [formGroup]="template" #formDirective="ngForm" class="col-lg-4 col-md-4 col-con">
     <input matInput placeholder="Template Name"   formControlName="templateName"  >
 </form>
  

我还建议删除maxlength="255",required并使用   Validators.required和Validators.maxLength

templateName: ['name', [Validators.required,Validators.maxLength(255)]]

答案 1 :(得分:0)

或者您可以添加ngValue

<input matInput placeholder="Template Name"
   maxlength="255" formControlName="templateName" [ngValue]="name" required>