Question

我想知道用默认值预填充angular-form的正确方法是什么。我应该注入包含nullable输入形式的组件吗？（我对Create和Update使用相同的格式，我希望一种情况下fields预先填充，而另一种空白：

表格

export class UserFormComponent implements OnInit {
  @Output()
  submitEvent:EventEmitter<User>=new EventEmitter<User>();


  @Input()
  formSettings:FormSettings;
  ngOnInit(): void {
    console.log("init form");
  }
  submit(userForm:NgForm):void{
    this.submitEvent.emit(userForm.value);
  }
}

表单HTML

<form  #userForm="ngForm" (ngSubmit)="submit(userForm)">

  <div class="panel-heading">
    <h3 class="panel-title">User Form </h3>
  </div>
  <div class="panel-body"></div>

    <div id="required-group">
        <div class="form-group">
            <label>Id</label>
            <input id="id" [(ngModel)]="id" type="text" class="form-control" name="id">
        </div>
      </div>
  <div class="panel-footer">
      <button type="submit" class="btn btn-primary">Save</button>
  </div>
 </form>

创建组件

export class CreateComponent implements OnInit {
 public useOptional:boolean=true;
 public formSettings:FormSettings={
   isEditable:true
 }

 async onSubmitClicked(data:User):Promise<void>{
  console.log(data["value"]);

   var result=await this.userservice.createClientAsync(data);
   console.log("Result of creation:"+result);
   if(result){
    this.router.navigateByUrl('/index');
   }
 }
}

创建组件HTML

<div id="childForm">
        <app-user-form [formSettings]="formSettings" (submitEvent)="onSubmitClicked($event)" >              
        </app-user-form>
</div>

正如您在Create HTML中看到的那样，我没有发送任何输入。对于Update，方法是将输入作为默认值发送以填充表格？

设置角度形式的默认值

0 个答案: