Question

我在组件中创建动态表单时尝试学习如何使用Nested Model。但是，我在选择标签时遇到问题。我无法设置或从中获取价值。这是可以观察到的，因为AppComponent.initPhone（）方法中设置的默认值是设置下拉列表。当我从下拉列表中手动选择任何项目时，该值仍然未定义（可以在页面上的myForm详细信息部分中看到）。

这是我的傻瓜：http://plnkr.co/edit/iLITdV?p=preview

以下是相关代码（我认为），如果那个掠夺者死了：

//phone.component.ts
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'phone',
    template: `
    <div [formGroup]="phoneForm">
      <div class="form-group col-xs-6">
        <label>Phone number</label>
        <input type="text" class="form-control" placeholder="Phone" formControlName="phone">
        <small *ngIf="phoneForm.controls.phone.hasError('required') && phoneForm.controls.phone.touched" class="text-danger">
            Phone number is required
        </small>
        <small *ngIf="(phoneForm.controls.phone.hasError('minlength') || phoneForm.controls.phone.hasError('maxlength')) && phoneForm.controls.phone.touched" class="text-danger">
            Phone number is to be 10 numbers long
        </small>
      </div>
      <div class="form-group col-xs-6">
        <label>Phone Type</label>
        <select class="form-control" formControlName="phoneType">
          <option [value]="home" title="For home phone">HOME</option>
          <option [value]="sms" title="For text messaging">SMS</option>
          <option [value]="tty" title="For the deaf">TTY</option>
        </select>
      </div>
    </div>
    `
})
export class PhoneComponent {
    @Input('group')
    public phoneForm: FormGroup;
}

-

<!-- snippet from app.component.html -->
<!-- phones -->
        <div formArrayName="phones">
          <div *ngFor="let phone of myForm.controls.phones.controls; let i = index" class="panel panel-default">
            <div class="panel-heading">
              <span>Phone {{i+1}}</span>
              <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.phones.controls.length > 1" (click)="removePhone(i)"></span>
            </div>
            <div class="panel-body" [formGroupName]="i">
              <phone [group]="myForm.controls.phones.controls[i]"></phone>
            </div>
          </div>
        </div>

        <div class="margin-20">
          <a (click)="addPhone()" style="cursor: default">
            Add another phone number +
          </a>
        </div>

-

// snippet from app.component.ts
    ngOnInit() {
        this.myForm = this._fb.group({
            name: ['', [Validators.required, Validators.minLength(5)]],
            addresses: this._fb.array([]),
            phones: this._fb.array([])
        });

        // add address
        this.addAddress();
        this.addPhone();

        /* subscribe to addresses value changes */
        // this.myForm.controls['addresses'].valueChanges.subscribe(x => {
        //   console.log(x);
        // })
    }

    initAddress() {
        return this._fb.group({
            street: ['', Validators.required],
            postcode: ['']
        });
    }

    initPhone() {
      let valids = Validators.compose([
        Validators.required, 
        Validators.minLength(10), 
        Validators.maxLength(10)
        ]);
      return this._fb.group({
        phone: ['502-555-1234', valids],
        phoneType: ['sms']
      })
    }

Answer 1

不要在您的选择中使用[value]，而是使用name：

以下

<select class="form-control" formControlName="phoneType">
  <option [value]="home" title="For home phone">HOME</option>
  <option [value]="sms" title="For text messaging">SMS</option>
  <option [value]="tty" title="For the deaf">TTY</option>
</select>

应该是：

<select class="form-control" formControlName="phoneType">
   <option name="home" title="For home phone">HOME</option>
   <option name="sms" title="For text messaging">SMS</option>
   <option name="tty" title="For the deaf">TTY</option>
</select>

你的分叉Plunker

使用角度2中的嵌套模型从选择中获取值

1 个答案: