角度5亲子沟通

我要为创建创建创建组件(&A);编辑,但它共享相同的表单,所以我在另一个组件中创建表单。

代码如下:

父级:OrganizationEditComponent(我使用解析器填充组织数据)

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertifyService } from './../../_services/alertify.service';
import { Organization } from './../../_models/organization';
import { OrganizationService } from './../../_services/organization.service';


@Component({
  selector: 'app-organization-edit',
  templateUrl: './organization-edit.component.html',
  styleUrls: ['./organization-edit.component.css']
})
export class OrganizationEditComponent implements OnInit {
    org: Organization;
    editForm: FormGroup; 

  constructor(private orgService: OrganizationService,
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router, 
    private alertify: AlertifyService) { }

  ngOnInit() {
    this.route.data.subscribe( data => {
        this.org = data['organization'];
    });
  }

  }


}

OrganizationEditComponent。html

<h1>Children </h1> 
<app-organization-form [org]="org"></app-organization-form>

子组件:OrganizationFormComponent。ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertifyService } from './../../_services/alertify.service';
import { Organization } from './../../_models/organization';
import { OrganizationService } from './../../_services/organization.service';


@Component({
  selector: 'app-organization-form',
  templateUrl: './organization-form.component.html',
  styleUrls: ['./organization-form.component.css']
})
export class OrganizationFormComponent implements OnInit {
    @Input() org: Organization;
    myForm: FormGroup;

  constructor(private orgService: OrganizationService,
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private alertify: AlertifyService
    ) { }

  ngOnInit() {
      this.createForm();
  }

  createForm() {
    this.myForm = this.fb.group({
        organizationName: [this.org.organizationName, Validators.required],
        legalName: [this.org.legalName, Validators.required],
        logoUrl: [this.org.logoUrl, Validators.required],
        abn: [this.org.abn, Validators.required],
        acn: [this.org.acn, Validators.required]
    });    
  }

  save() {

  }
}

OrganizationFormComponent。html

{{org |json}}

<div class="container">
    <div class="row">
        <form [formGroup]="myForm" (ngSubmit)="save()" class="form-horizontal">

            <div class="form-group" [ngClass]="{'has-error': editForm.get('organizationName').touched && editForm.get('organizationName').hasError('required')}">
              <label class="col-sm-2" for="organizationName">organizationName</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="organizationName" formControlName="organizationName">
                <span class="help-block" *ngIf="editForm.get('organizationName').touched && editForm.get('organizationName').hasError('required')">organizationName is required</span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': editForm.get('legalName').touched && editForm.get('legalName').hasError('required')}">
              <label class="col-sm-2" for="legalName">legalName</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="legalName" formControlName="legalName">
                <span class="help-block" *ngIf="editForm.get('legalName').touched && editForm.get('legalName').hasError('required')">legalName is required</span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': editForm.get('logoUrl').touched && editForm.get('logoUrl').hasError('required')}">
              <label class="col-sm-2" for="logoUrl">logoUrl</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="logoUrl" formControlName="logoUrl">
                <span class="help-block" *ngIf="editForm.get('logoUrl').touched && editForm.get('logoUrl').hasError('required')">logoUrl is required</span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': editForm.get('abn').touched && editForm.get('abn').hasError('required')}">
              <label class="col-sm-2" for="abn">abn</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="abn" formControlName="abn">
                <span class="help-block" *ngIf="editForm.get('abn').touched && editForm.get('abn').hasError('required')">abn is required</span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': editForm.get('acn').touched && editForm.get('acn').hasError('required')}">
              <label class="col-sm-2" for="acn">acn</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="acn" formControlName="acn">
                <span class="help-block" *ngIf="editForm.get('acn').touched && editForm.get('acn').hasError('required')">acn is required</span>
              </div>
            </div>
        </form>
    </div>
</div>

运行代码时出现错误:

错误类型错误:无法读取未定义的属性“get”

指chidlren组件html

<form [formGroup]="myForm" (ngSubmit)="save()" class="form-horizontal">

我的路线。ts

{路径:'组织/编辑/:id',组件:OrganizationEditComponent,解析:{组织:OrganizationResolver}},

父组件可以从解析器获取组织数据。但子组件无法接收数据?我该怎么办? 如何将“组织”数据发回给家长?我应该使用@ViewChild吗?

编辑: 我通过键入

{{ org | json }} 

这是可行的,但如果我像上面的代码那样放置表单,它就不起作用了。似乎子级“createform()”有错误,它无法从OnInit中的父级获取组织数据