Angular 5親子溝通

Question

我想為“創建和編輯”創建組件，但是它共享相同的表單，因此我在另一個組件中創建了Form。

這是代碼：

父級：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：“ organization / edit /：id”，組件：OrganizationEditComponent，解析：{organization：OrganizationResolver}}，

父組件很好，可以從解析程序獲取組織數據。 但是子組件不能接收數據？ 我該怎么辦 ？ 以及如何將“ org”數據發送回父級？ 我應該使用@ViewChild嗎？

編輯：我通過輸入來測試子組件html中的組織

{{ org | json }} 

它可以工作，但是如果我將上面的代碼形式放在上面，那是行不通的。 看來我從子級“ createform（）”出現了錯誤，該子級無法從OnInit的父級獲取組織數據

Answer 1

我認為您輸入的表格名稱有誤。

您已經編寫了editForm而不是myForm 。

例如。

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