代码之家  ›  专栏  ›  技术社区  ›  Ebin Manuval

自举模型内的反应子型群

  •  0
  • Ebin Manuval  · 技术社区  · 7 年前

    ngFor 所以当我点击里面的按钮时 下一代 我需要弹出一个模态并显示模态中的一些字段。

    order-create.component.ts

    export class OrderCreateComponent {
    
        @ViewChild(AlterationComponent) alteration: AlterationComponent;
    
        constructor(private fb: FormBuilder) {}
    
        createForm() {
    
        this.orderForm = this.fb.group({
          customer_name: ['', Validators.required],
          customer_badge: ['', Validators.required],      
          items: this.fb.array([ ])
        });
    
        let items = this.orderForm.get('items') as FormArray;
    
        this.suit_items.forEach(obj => {
          items.push(this.createItemForm(obj));
        });
    
      }
    
      createItemForm(obj): FormGroup {
    
        return this.fb.group({
          suit_item_id: [obj.id, Validators.required],
          alteration: this.fb.group({
            length: ''
          })
        });
    
      }
       openAlterationModal(item) {
        this.alteration.openModal(item.get('alteration'));
      }
    
    }
    

    create-order.html

    <form [formGroup]="orderForm" (submit)="onSubmit()">
    ......
    <div *ngFor="let item of orderForm.get('items').controls; let i = index;"">
        ......
        <button (click)="openAlterationModal(item)">open modal</button>
    </div>
     <app-alteration></app-alteration>
    </form>
    

    alteration.component.ts

    @Component ({
      selector: 'app-alteration',
      templateUrl: 'alteration.html'
    })
    
    export class AlterationComponent {
      alterationForm: FormGroup;
      openModal(alteration: FormGroup) {
        this.alterationForm = alteration;
      }
    
    }
    

    alteration.html

    .....
    <div [formGroup]="alterationForm" *ngIf="alterationForm">
        <input type="text" class="form-control" id="length" name="length" placeholder="length" formControlName="length" required>
    </div>
    .....
    

    我的问题是modal=>alteration.html中的表单组未显示,但我可以在 更改.component.ts openModal函数。

    我不知道我做的是否正确。我是新来的角度。我该怎么办。

    0 回复  |  直到 7 年前