我在Angular中的表单中的输入没有显示默认值

Question

我有一个表格，我希望在其中一个输入中具有默认值，默认值是用户的显示名称，但是它没有显示，甚至在添加为默认值的默认值时也不会显示“ hi”输入，我不确定我应该做什么：

<form [formGroup]= "postForm" (ngSubmit)="onSubmit()" novalidate>
  <div class="mb-3">
    <label>Title</label>
    <input type="text" formControlName="title" class="form-control" required>
  </div>

  <div class="mb-3">
    <label>Content</label>
    <input type="text" formControlName="message" class="form-control" required>
  </div>

  <div class="mb-3" *ngIf="authService.userData as user" >
    <input type="text" value="{{user.displayName}}" formControlName="owner" class="form-control">
  </div>

  <div class="mb-3">
    <button type="submit" class="btn btn-primary" [disabled]="!postForm.valid">Create</button>
  </div>


</form>

这是与之相关的打字稿组件：

    import { Component, OnInit } from '@angular/core';
import {AuthService} from "../shared/services/auth.service";
import { PostService } from '../post.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from "@angular/router";



@Component({
  selector: 'app-create-post',
  templateUrl: './create-post.component.html',
  styleUrls: ['./create-post.component.scss']
})
export class CreatePostComponent implements OnInit {
  public postForm: FormGroup;

  constructor(public postService: PostService,
              public formBuilder: FormBuilder,
              public router: Router,public authService: AuthService){
    this.postForm = this.formBuilder.group({
      title: [''],
      message: [''],
      owner: [''] ,
      date: new Date().toLocaleString()
    })
  }

  ngOnInit(): void {
  }

  onSubmit() {
    this.postService.createPost(this.postForm.value);
    this.router.navigate(['list-posts']);
  };

}

帮助非常需要和赞赏，我还想指出，我试图将Diellayname值直接放入TypeScript文件，但不存在该文件，仅可从HTML文件可用。

Answer 1

您不应使用value带有角控制表单，而是初始值是您在打字稿文件中提供的值，因此，请从HTML中删除值部分，然后替换在打字稿文件中所有者：['']，带有所有者：this.authservice.userdata，甚至所有者：'hi''只是为了确保其有效。