angular - Angular 形式的 Observables

Question

我的网站上有一个表格。(person.firstName, lastName, DOB, Gender, Citizenship, etc...)。我的问题是我如何观察整个形式的变化并从这个观察中得到两件事:

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

谢谢你的帮助

Answer 1

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

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

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

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

其他用于跟踪表单状态的只读 bool 属性:

(有效，无效，待定，禁用，启用，原始，脏，触摸，未触摸)

你可以通过这个技巧跟踪旧的值状态

  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