Question

我有一个对话框，其中有一个表单。对于表单组件，我传递了User类型的对象。我想在表单的字段中使用该对象。这意味着当打开表单时（这发生在我们也传递对象的单击之后），表单的字段将填充来自对象的值。此外，当我第一次构造表单组件时，我进行ajax调用以获取一些Role对象并使用它们构造下拉列表选择。我希望该下拉列表的选定选项是传递的用户的对象角色。

@Component({
  inputs: ['selectedUser'],
  outputs: ['editedUser'],
  selector: 'user-form',
  templateurl: 'user.form.themplate.html'
})
export class UserForm {

// user object has login , firstName, lastName, email and role properties
selectedUser: User;    
roles: Role[];    
controlForm: FormGroup;
editedUser: EventEmitter<User>

loginControl: AbstractControl;
firstNameControl: AbstractControl;
lastNameControl: AbstractControl;
roleControl: AbstractControl;
emailControl: AbstractControl;

constructor(fb: FormBuilder) {
   this.controlForm = fb.group({
      'loginControl': ['', Validators.required],
      'firstNameControl': ['', Validators.required],
      'lastNameControl': ['', Validators.required],
      'roleControl': ['', Validators.required],
      'emailControl': ['', Validators.compose(Validators.required, 
                                          MailValidator.validateMail]});

   this.loginControl= this.myForm.controls['loginControl'];
   this.firstNameControl= this.myForm.controls['firstNameControl'];
   this.lastNameControl= this.myForm.controls['lastNameControl'];
   this.emailControl= this.myForm.controls['emailControl'];
   this.roleControl= this.myForm.controls['roleControl'];

    // somehow fill this.roles with Role object
 });

 onSave() :void {
    // or get the object from controlForm.value
    // and send that one
    this.editedUser.emit(this.selectedUser);
 }
}

 <form [formGroup]="controlForm">
 <div class="field">
   <input type="text"
      [formControl]="loginContol">
 </div>
 <div class="field">
   <input type="text"
      [formControl]="firstNameControl">
 </div>
 <div class="field">
   <input type="text"
      [formControl]="lastNameContol">
 </div>
 <div class="field">
   <input type="text"
      [formControl]="emailContol">
 </div>

<select [formControl]="roleContol">
  <option *ngFor="let r of roles"
      [selected] = "some expression to select the role from the selectedUser object"
   >{{r.name}}</option>
</select>
 <button type="save" [disabled]="!controlForm.valid" (click)="onSave()">Save</button>
 </form>

我想要的是当表单显示其所有字段都要填充来自selectedUser对象的数据时，如果用户有角色，则包括下拉列表中的角色。之后，当点击save按钮时，我不想使用表单中的数据（只有一些文件可能已被更改），并以User的形式发送该数据对象到事件发射器。我看到您可以使用ngModel和ngForm代替，但这对我来说似乎不是更好的方法，而且我也不知道验证器的分配如何在那里工作。

Answer 1

如果要将用户属性绑定到表单输入，并且还想在保存的其他位置提交已更改的用户信息，则需要使用双向绑定：

<input type="text"  class="form-control" id="name" required
   [(ngModel)]="selectedUser.name" name="name">

这样，如果您在selectedUser方法中访问onSave()时有人更改了名称输入，您将获得更新的信息。

您可以根据需要进行尽可能多的验证，例如在那里使用的required。

有关表单的更多信息，请查看here。

Answer 2

您可以按以下形式绑定单向和双向绑定：

将参数传递给其他形式的表格：

单向绑定：

<widget [myName]="model.Name"></widget>

双向绑定：

<widget [(myName)]="model.Name"></widget>

接受输入参数的表单：

import {Input} from "@angular/core"; @Component({ selector: 'widget', templateUrl:'content/Widget.html' }) export class Widget { @Input() myName: string= ""; }

在表单中使用输入参数

2 个答案: