Angular 形式的 Observables

Question

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

• formControl 及其当前状态

• 已处理 formControl 的当前值

  字首 {{可用前缀}}

        <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>
  

感谢您的帮助

Answer 1

valueChanges observable 总是会推送表单的新值。

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

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);
     });
  }

stackblitz example

AbstractControl

Answer 2

一旦您的表单被创建（通过 FormBuilder），只需这样写：

this.fmdForm.valueChanges.subscribe(formValue => { console.log(formValue); });