2

我的网站上有一个表格。（person.firstName、lastName、DOB、Gender、Citizenship 等...）。我的问题是如何观察整个形式的变化并从观察中得到两件事：

  • formControl 及其当前状态

  • 处理的 formControl 的当前值

    前缀 {{availablePrefix}} 

          <div class="col">
        <label for="firstName">First Name<span style="color: red"> *</span> </label>
        <input formControlName="party.firstName" type="text" autocomplete="off" id="firstName"/>
      </div>

      <div class="col">
        <label for="middleName">Middle Name</label>
        <input formControlName="party.middleName" type="text" autocomplete="off" id="middleName" maxlength="1" />
      </div>

      <div class="col">
        <label for="lastName">Last Name<span style="color: red"> *</span> </label>
        <input formControlName="party.lastName" type="text" autocomplete="off" id="lastName"/>
      </div>

      <div class="col">
        <label for="suffix">Suffix</label>
        <select formControlName="party.suffix" id="suffix">
          <option [value]="availableSuffix" *ngFor="let availableSuffix of availableSuffixes">{{availableSuffix}}
          </option>
        </select>
      </div>
    </div>
  </form>

感谢您的任何帮助

4

2 回答 2

3

valueChangesobservable 总是会推动表单的新值。

为了跟踪表单的状态，有几个属性：

status控件的验证状态。有四个可能的验证状态值 ( VALID , INVALID , PENDING, DISABLED)。

还有另一个 observable 可以跟踪状态变化 statusChanges

其他用于跟踪表单状态的只读布尔属性：

( valid , invalid , pending , disabled , enabled , pristine , dirty , touched , untouched)

您可以通过此技巧跟踪旧的 valeu 状态

  public form:FormGroup;
  oldValue:any;
  constructor (fb:FormBuilder) { 
     this.form = fb.group({
       name:[],
       lastName:[]
     });

     this.form.valueChanges.subscribe(newValue => { 
        console.log('old value',this.oldValue);
        this.oldValue = newValue;
        console.log('new form value',newValue);
        console.log('state ', this.form.status);
        console.log('pristine ',this.form.pristine);
        console.log('dirty ',this.form.dirty);
        console.log('touched ',this.form.touched);
     });
  }

堆栈闪电战示例

抽象控制

于 2018-07-25T10:36:53.083 回答
1

创建表单后（通过 FormBuilder），只需编写：

this.fmdForm.valueChanges.subscribe(formValue => { console.log(formValue); });
于 2018-07-25T10:06:21.023 回答