时间戳

首页 > 解决方案 > 将所有表单状态保存在具有不同选项卡的一个组件中

angular - 将所有表单状态保存在具有不同选项卡的一个组件中

问题描述

我有一个包含 2 个选项卡和 2 个表单的组件，每个选项卡有一个表单：

tab1.component.ts：

ngOnInit() {
   this.params = getParams();
}
getParams() {
    return {
        text : 'test'
        form: {
            status: this.form.invalid
        }
    };
}

tab1.component.html：

<validate [params]="this.params">
</validate>

tab2.component.ts：

ngOnInit() {
   this.params = getParams();
}
getParams() {
    return {
        text : 'test 1'
        form: {
            status: this.form.invalid
        }
    };
}

tab2.component.html：

<validate [params]="this.params">
</validate>

组件validate：

@Component({
    selector: 'validate',
    templateUrl: './validate.component.html',
    styleUrls: ['./validate.component.scss']
})
export class Validate implements OnInit {

@Input() params?: TabContentParam;

public showButton = false;
...
}

validate.component.html：

<button *ngIf="showButton" mat-flat-button>Button</button>

我有一个共同的组件<validate></validate>。所以这个想法是showButton当两个参数form.status都为真时输入真。就像我做的那样，我只检查了最后一个状态，这是错误的。问题是我如何检查这两种状态？我检查并在加载页面时使用两种表单呈现两个选项卡。提前谢谢。

标签： angulartypescript

解决方案

您可以为其创建共享服务。

@Injectable({
  providedIn: 'root'
})
export class TabButtonService {

constructor() { }

    showButton : {
      tab1:false,
      tab2: false,
    }
}

tab2.component.ts

constructor(tabButtonService :TabButtonService ) { }

ngOnInit() {
   this.params = getParams();
   this.tabButtonService.showButton.tab1 = true
}

对 tab1.component.ts 重复

验证组件：

export class Validate implements OnInit {

   constructor(tabButtonService :TabButtonService ) { }

  @Input() params?: TabContentParam;

  public showButton = this.tabButtonService.showButton.tab1 && this.tabButtonService.showButton.tab2;
  ...
}

推荐阅读