角5父子通信

Question

我想为create & Edit创建组件，但是它共享相同的表单，所以我在另一个组件中创建了表单。

以下是代码：

父级: 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>

当我运行代码时，我得到了错误：

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

它引用chidlren组件html。

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

我的routes.ts

{path：‘组织/编辑/:id’，组件: OrganizationEditComponent，解析：{organization: OrganizationResolver}，

父组件可以从解析器获取组织数据。但是子组件不能接收数据？我该怎么办？以及如何将"org“数据发回给父级？我应该使用@ViewChild吗？

编辑:我通过键入

{{ org | json }} 

它可以工作，但是如果我像上面的代码那样放置表单，它就不能工作。似乎我有来自子级"createform()“的错误，它无法从OnInit中的父级获取组织数据。

Answer 1

我觉得你的表格名字出了问题。

你写的是editForm而不是myForm。

例如：

'has-error': editForm.get('organizationName').touched