代码之家 › 专栏 › 技术社区 › Bhrungarajni

如果字段在Angular2中编辑后具有值,如何保持该字段处于启用状态

typescript angular

0

Bhrungarajni · 技术社区 · 7 年前

如果在第一个字段下拉列表中选择第三个下拉值,则启用第二个字段。所以,现在,如果我通过选择下拉列表的第三个值来给出值,并且给第二个字段一个值,它就被取下来了。现在我转到edit函数并更改一些其他值,因为第二个字段被禁用,我将获得ass空值或未定义值。所以现在,如果第一个字段在编辑模式下没有更改,我希望第二个字段具有它的值。

HTML:

TS:

private FormInit() {
    //Add
    if (!this.Details) {
      this.detailsForm = this.FB.group({
        Type: ['', Validators.required],
        ID: [{ value: 0, disabled: true }],
      });

    } else {
      // edit
      this.detailsForm = this.FB.group({
        Type: [this.Details.data.Type, Validators.required],
        SourceID: [{ value: this.Details.data.ID, disabled: true }],

      });
      if (this.Details.mode == 'readOnly') {
        this.detailsForm.disable();
      }
    }
  }

添加和编辑功能:

public save() {
    let addParams = this.detailsForm.value;
   addParams.Type = addParams.Type ? addParams.Type: 0;
    this.Service.add(addParams).subscribe(res => {
      console.log(res);
      this.successMessagePopUp(res);
    })
  }

  public update() {
    let updateParams = this.detailsForm.value;

    this.Service.update(updateParams).subscribe(res => {
      this.successMessagePopUp(res)
    })
  }

希望这个cn可以通过一种方式解决,如果选择了第三个下拉值,那么在编辑模式下,如果选择了其他值,我们可以保持第二个字段启用并禁用oly吗?

1 回复 | 直到 7 年前

1

Bhrungarajni 7 年前

一般来说 disabled 值将在中显示未定义 angular .

附:我想根据你的要求:

private FormInit() {
    if (!this.Details) {
      this.detailsForm = this.FB.group({
        Type: ['', Validators.required],
        ID: [{ value: 0, disabled: true }],
      });

    } else {
      // edit
      this.detailsForm = this.FB.group({
        Type: [this.Details.data.Type, Validators.required],
        ID: [{ value: this.Details.data.ID }],

      });

     if (this.Details.data.Type == 3)
     {
         this.detailsForm.get("ID").enable();
     }
     else
     {
         this.detailsForm.get("ID").disable();
     }

      if (this.Details.mode == 'readOnly') {
        this.detailsForm.disable();
      }
    }
  }