Angular 8 : Mark Form as Touched from Parent Component

Question

我如何从父组件声明子组件表单 Mark Touched？

目前在子组件中，我们有一个输入变量和有效的 ngOnChanges

@Input public markFormTouchedFlag: boolean

if (this.markFormTouchedFlag) { 
    this.addressform.markAllAsTouched();
}

好奇，是否有更有效的方法来制作从父组件触及的子组件表单(地址表单)？

也许应该让问题更通用，找到 formvalidity、markuntouched，但我只会坚持第一个问题。

Answer 1

如果您需要将相同的变量(“markFormTouchedFlag”)传递给多个组件，您可以以更即兴的方式执行此操作，您可以使用此方法。这种方法将数据存储在可观察对象中，并通过订阅它来更新变量 auto，无论何时使用它。

创建服务来存储数据:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FlagService {
    private subject = new Subject<any>();

    updateFlag(flag: bool) {
        this.subject.next({ flag: flag });
    }

    setFlag() {
        this.subject.next();
    }

    getFlag(): Observable<any> {
        return this.subject.asObservable();
    }
}

创建父组件:

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { FlagService } from '../services/FlagService.service';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnDestroy {
    flag: any;
    subscription: Subscription;

    constructor(private flagService: FlagService) {}

    setFlag(): void {
     this.flagService.setFlag(flag);
   }

   clearFlag(): void {
       this.messageService.clearMessage();
   }
}

在这个组件(父组件)中，我们有两个函数设置和清除标志。 Setflag函数用于设置服务中的值。一旦它被设置在订阅了任何值的服务层中，它将被更新。 clearFlag函数用于给变量设置一个空值。

子组件:

import { Component } from '@angular/core';

import { FlagService } from '../services/FlagService.service';

@Component({ templateUrl: 'home.component.html' })
export class HomeComponent {
    
 flag: any;
 subscription: Subscription;

 constructor(private flagService: FlagService) {
     this.subscription = this.flagService.getFlag().subscribe(flag => { this.flag = flag; });
 }

 ngOnDestroy() {
     this.subscription.unsubscribe();
 }

通过这种方式，您可以从 observable 获取值，每当服务中的标志发生更改时，一旦在父组件中发生更改并在组件中设置为标志，它将在子组件中自动更新，因为在构造函数中进行的订阅。

在组件销毁时，我们取消订阅值。