web-dev-qa-db-ja.com

angular 2 TypescriptでFormBuilderオブジェクトに値を設定する方法

私はリアクティブフォーム検証（モデル駆動型検証）を使用していますが、ドロップダウンの変更時にフォームオブジェクトに値を設定できません

これは私のフォームグループです

studentModel:StudenModel
AMform: FormGroup;
Name = new FormControl("", Validators.required);
Address = new FormControl("", Validators.maxLength(16));

constructor(fb: FormBuilder){     
  this.AMform = fb.group({
    "Name": this.Code,
    "Address": this.Abbrev,
  });
}
onAccntChange(event: Event) {
  // set the value from Class Model
  ////  this.studentModel 
  // how to set this.studentModel value to form
}

これは私のhtmlページです

<form [formGroup]="AMform" (ngSubmit)="submit()">
    <select (change)="onAccntChange($event)" class="form-control" [disabled]="ddlActivity" formControlName="AccountManagerID">
        <option value="0">Select</option>
        <option *ngFor="let item of allStudent" value={{item.StudentID}}>
            {{item.Name}}
        </option>
    </select>

    <div class="col-sm-9">
        <input type="text" class="form-control" formControlName="Name">
    </div>
    <div [hidden]="Name.valid || Code.pristine" class="error"> Name is required </div>

    <div class="col-sm-9">
        <input type="text" class="form-control" formControlName="Address">
    </div>
    <div [hidden]="Address.valid || Address.pristine" class="error">Address is required </div>

    <button type="submit" class="btn btn-warning "><i class="fa fa-check-square"></i> Save</button>
</form>

変更時にformcontrol値を設定する必要があります

javascripthtmlangulartypescript
9
coder

setValueオブジェクトでFormControlメソッドを呼び出すことで、これを実現できます。

  (<FormControl> this.AMform.controls['Name']).setValue("new value");

または：

this.Name.setValue("new value");
13
Maciej Treder

FormGroupオブジェクトのpatchValueメソッドを使用します。

 onAccntChange(event: Event) {
    this.AMform.patchValue({yourControl: studentModelValue})
    }
6
jmachnik

setValueを使用して、FormControlsを指定allする必要があります。

this.AMform.setValue({'Name':'val1', 'Address':'val2'})

patchValueを使用すると、必要なもののみを指定できます。

this.AMform.patchValue({'Name':'val1'})

ここ もう少し読むことができます。

4
hestellez