javascript - 如何使用一个组件来验证其他两个组件？

Question

我有三个组件:GalleryAddComponent 添加新元素，GalleryItemComponent，编辑元素，FieldsComponent，我想要的表单在组件中使用:GalleryAddComponent 和 GalleryItemComponent。所有组件都在 GalleryComponent 中。但是，当我转到组件 GalleryAddComponent 添加新元素时，出现错误:ERROR TypeError: Cannot read property 'controls' of undefined。同样在组件中:GalleryItemComponent。

帮助解决这个问题，使编辑和添加逻辑正常工作。

GalleryAddComponent模板

<div class="card">
    <div class="card-body">
        <form [formGroup]="angForm" novalidate>
                <app-fields [formGroup]="angForm"></app-fields>
            <div class="form-group but-group">
                <button (click)="addPost(title.value, url.value);  angForm.reset(title.value, url.value)"
                        [disabled]="angForm.pristine || angForm.invalid"
                        class="btn btn-primary">Add
                </button>
                <a routerLink="/" class="btn btn-danger">Back</a>
            </div>
        </form>
    </div>
</div>

GalleryAddComponent代码

export class GalleryAddComponent implements OnInit {
    angForm: FormGroup;
    isAdded: boolean = false;
    constructor(private fb: FormBuilder, private galleryService: GalleryService) {}

    ngOnInit() {
        this.angForm = this.fb.group({
            title: ['', Validators.required],
            url: ['', Validators.required]
        });
    }

    addPost(title: string, url: string): void {
        this.galleryService.add(title, url).subscribe(res => {
            this.isAdded = true;
        });
    }
}

GalleryItemComponent 模板

    <div class="card" *ngIf="toggleEdit">
        <h4>Edit your post</h4>
        <div class="card-body">
            <form [formGroup]="angForm" novalidate>
                <app-fields [formGroup]="angForm"></app-fields>
                <div class="form-group but-group">
                    <input type="button"
                           (click)="updatePost(title.value, url.value)"
                           [disabled]=" angForm.invalid"
                           class="btn btn-primary" value="Update Post">
                </div>
            </form>
        </div>
    </div>

GalleryItemComponent代码

export class GalleryItemComponent implements OnInit {
   pic: Picture;
   angForm: FormGroup;
   
    constructor(private route: ActivatedRoute,
    private galleryService: GalleryService, private fb: FormBuilder) {}

    ngOnInit() {
        this.angForm = this.fb.group({
            title: ['', Validators.required],
            url: ['', Validators.required]
        });
        this.showPost();
    }

    showPost(): void {
        this.route.params.subscribe(params => {
            this.galleryService.getPicture(params['id']).subscribe(res => {
                this.pic = res;
                this.angForm.setValue({title: res.title, url: res.url})
            })
        })
    }
    updatePost(title: string, url: string): void {
        this.route.params.subscribe(params => {
            this.galleryService.update(title, url, params['id']).subscribe(res => {
                if (res.id === this.pic.id) {
                    this.pic.title = title;
                    this.pic.url = url;
                } 
            });
        });
    }
}

FieldsComponent模板

<div [formGroup]="formGroup">
    <div class="form-group">
        <label class="col-md-4">Picture Title</label>
        <input type="text" class="form-control" formControlName="title" minlength="1" #title/>
    </div>
    <div *ngIf="angForm.controls['title'].invalid && (angForm.controls['title'].dirty || angForm.controls['title'].touched)"
         class="alert alert-danger">
        <div *ngIf="angForm.controls['title'].errors.required">
            Title is required.
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4">Picture Address (url)</label>
        <input type="url" class="form-control" formControlName="url" #url pattern="https?://.+"
               title="Include http://"/>
    </div>
    <div *ngIf="angForm.controls['url'].invalid && (angForm.controls['url'].dirty || angForm.controls['url'].touched)"
         class="alert alert-danger">
        Address(url) is required.
        <div *ngIf="angForm.controls['url'].errors.required ">

        </div>
    </div>
</div>

FieldsComponent代码

export class FieldsComponent implements OnInit {
@Input() formGroup: FormGroup;

  constructor() {}

  ngOnInit() {}

}

Answer 1

您收到此错误是因为您在 FieldsComponent 中引用了 angForms.controls，它只有一个变量:formGroup。

只需将模板 HTML 代码中的 angForms 替换为 formGroup 即可解决问题。

<div [formGroup]="formGroup">
  <div class="form-group">
    <label class="col-md-4">Picture Title</label>
    <input type="text" class="form-control" formControlName="title" minlength="1" #title />
  </div>
  <div *ngIf="formGroup.controls['title'].invalid && (formGroup.controls['title'].dirty || formGroup.controls['title'].touched)"
    class="alert alert-danger">
    <div *ngIf="formGroup.controls['title'].errors.required">
      Title is required.
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4">Picture Address (url)</label>
    <input type="url" class="form-control" formControlName="url" #url pattern="https?://.+" title="Include http://" />
  </div>
  <div *ngIf="formGroup.controls['url'].invalid && (formGroup.controls['url'].dirty || formGroup.controls['url'].touched)"
    class="alert alert-danger">
    Address(url) is required.
    <div *ngIf="formGroup.controls['url'].errors.required ">

    </div>
  </div>
</div>