web-dev-qa-db-ja.com

Angular2 Reactive forms-ドロップダウンでフォームフィールドのデフォルト値を設定します

angular 2リアクティブフォームのすべてのフォームフィールドにデフォルト値を設定するにはどうすればよいですか？

問題を再現するための plnkr

以下のコードは、オブジェクトが関連付けられているため、ドロップダウン値を更新しません。

注：ここでは、Backend APIから受信した応答を使用して、すべてのフォームフィールドにデフォルト値を設定する必要があります。

Component.html

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
    <div class="form-group">
        <label>Country:</label>
        <select formControlName="country">
          <option *ngFor="let country of masterCountries" [ngValue]="country">{{country.countryName}}</option>
        </select>
    </div>

    <div class="form-group">
      <label for="">Name</label>
      <input type="text" class="form-control" formControlName="name">
      <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
            Name is required (minimum 5 characters).
          </small>
      <!--<pre class="margin-20">{{ myForm.controls.name.errors | json }}</pre>-->
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
      <pre>Is myForm submitted?: <br>{{submitted | json}}</pre>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div>

Component.ts

export class AppComponent implements OnInit {
    public myForm: FormGroup;
    public masterCountries: any[] = [{"countryCode":"AF","countryName":"Afghanistan"},{"countryCode":"AL","countryName":"Albania"},{"countryCode":"DZ","countryName":"Algeria"},{"countryCode":"AS","countryName":"American Samoa"},{"countryCode":"AD","countryName":"Andorra"}];

    // Sample response received from backend api
    public CountryResponse = {country: {"countryCode":"AF","countryName":"Afghanistan"}, name: 'test123'};
    constructor(private _fb: FormBuilder) { }

    ngOnInit() {

        // the short way
        this.myForm = this._fb.group({
            country: [''],
            name: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
        });


        (<FormGroup>this.myForm)
            .setValue(this.CountryResponse, {onlySelf: true});


    }


    save(model: User, isValid: boolean) {
        this.submitted = true;
        console.log(model, isValid);
    }
}

フォーム全体を設定する他の方法があるかどうかを教えてください。

angulartypescriptangular2-forms
24
Narendra CM

これを変更するだけです：

 (<FormGroup>this.myForm)
            .setValue(this.CountryResponse, {onlySelf: true});

これに：

const selectedCountry = this.masterCountries.find(country => country.countryCode === this.CountryResponse.country.countryCode)
this.CountryResponse.country = selectedCountry;
(<FormGroup>this.myForm)
            .setValue(this.CountryResponse, {onlySelf: true});

前に述べたように、オブジェクトのまったく同じ参照を渡す必要があります

9
Fabio Antunes

私はこれが古い質問であることを知っていますが、誰かがそれを探しているなら、PatchValue：

this.myForm.patchValue({
   country: this.CountryResponse,
   name: 'Any Name'
});

これにより部分的にも許可されるため、次のようなことができます。

this.myForm.patchValue({ country: this.CountryResponse });

または、値を単一のコントロールに設定できます。

this.myForm.get('country').setValue(this.CountryResponse);
18
DeBorges

this.selectedCountryの要素の1つとthis.masterCountriesは同じフィールドの値を持っているように見えますが、それらは同じオブジェクトではないであるため、コードは機能しません。これにより、select.value === option.value比較は常にfalseを返します。

動作させるのは簡単です。setValue関数を次のように変更するだけです：

(<FormControl>this.form.controls['country'])
            .setValue(this.masterCountries[0], { onlySelf: true });

または、FormGroupの作成時に設定することもできます。

    this.myForm = this._fb.group({
        country: [this.masterCountries[0]],
        name: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
    });
10
Harry Ninh

フォームコントロールを宣言するとき、または初期化するときにデフォルト値をパラメーターとして渡す

  MyFormControl: FormControl = new FormControl('Default value');
3
Omkar Dixit