以反应形式从服务中设置 return 值

Question

我需要在 angular 6 中进行编辑。我用 asp 核心 2.1 创建 Web 服务器。

我有一页用于创建和编辑 role .

现在我需要从网络服务器设置反应形式的值。我该怎么做？

这个role.ts:

    export class RoleComponent implements OnInit {

  roleregister:FormGroup;
  roles:Role[];
  role:Role;
  public dpDiabled:boolean;
  public titleLenght:boolean;
  constructor(private rolseService:RoleServiceService,private formbuilder:FormBuilder,private route:ActivatedRoute) { 

    this.rolseService.GetAllRole().subscribe((data)=>{
      this.roles=data;
    });

  }

  ngOnInit() {
    this.roleregister=this.formbuilder.group({
      description:['',Validators.required],
      name:['',Validators.required],
      rolebase:[''],
      rolelevel:['',Validators.required]
    })

    const id= +this.route.snapshot.paramMap.get('id');
    console.log(id);
    this.rolseService.GetRoleById(id).subscribe((data)=>{
      this.role=data;
    });
  }

编辑

  <div class="roleitem">
    <div class="form-group">
        <label style="float:right;direction: rtl;" for="exampleInputEmail1"> زیر دسته  : </label>
      <br>
      <nz-form-control  [nzSpan]="12" >
        <nz-select formControlName="rolelevel" [nzDisabled]='dpDiabled' style="width: 351px;float: right;margin-right: -176px;margin-top: 10px;" name="select-validate">
          <div >
          <nz-option  style="text-align: center;" 
          *ngFor="let role of roles" nzValue={{role.id}} nzLabel={{role.description}}></nz-option>
        </div>
        </nz-select>
      </nz-form-control>
      </div>

</div>

Answer 1

一种选择是使用

this.roleregister.setValue({
    description: data.description,
    name: data.name,
    rolebase: data.rolebase,
    rolelevel: data.rolelevel
})

Answer 2

在 ngOnInit 中进行以下更改：

ngOnInit() {

    const id= +this.route.snapshot.paramMap.get('id');
    console.log(id);
    this.rolseService.GetRoleById(id).subscribe((data)=>{
      this.role=data;
      this.setFormData();
    });
  }

setFormData(){
  this.roleregister=this.formbuilder.group({
      description:[this.role.description,Validators.required],
      name:[this.role.name,Validators.required],
      rolebase:[this.role.rolebase],
      rolelevel:[this.role.rolelevel,Validators.required]
    })    
}

从服务器接收数据后设置表单的数据。

Answer 3

您可以像下面的代码一样使用 setValue 形成您的 formBuilder

this.rolseService.GetRoleById(id).subscribe((data)=>{
      this.role=data;
      this.roleregister.setValue({
      description: this.role.description,
      name: this.role.name,
      rolebase: this.role.rolebase,
      rolelevel: this.role.rolelevel
     })
   });

这可能有用 - 编码愉快！！

以反应形式从服务中设置 return 值

set return value from serve in rective form

angular

angular-reactive-forms

angular6